รับข้อความในเว็บแอป

เลือกแพลตฟอร์ม:

iOS+ Android Web Flutter Unity C++

ลักษณะการทำงานของข้อความจะแตกต่างกันไปตามว่าหน้าเว็บอยู่เบื้องหน้า (มีการโฟกัส) หรืออยู่เบื้องหลัง ซ่อนอยู่หลังแท็บอื่นๆ หรือปิดไปแล้วโดยสมบูรณ์ ในทุกกรณี หน้าเว็บต้องจัดการการ onMessage เรียกกลับ แต่ในกรณีที่อยู่เบื้องหลัง คุณอาจต้องจัดการ onBackgroundMessage หรือกำหนดค่าการแจ้งเตือนแบบแสดงผลเพื่อให้ผู้ใช้สามารถนำ เว็บแอปของคุณมาไว้เบื้องหน้าได้

สถานะของแอปพลิเคชัน	การแจ้งเตือน	ข้อมูล	ทั้งสอง
เบื้องหน้า	`onMessage`	`onMessage`	`onMessage`
เบื้องหลัง (Service Worker)	`onBackgroundMessage` (แสดงการแจ้งเตือนโดยอัตโนมัติ)	`onBackgroundMessage`	`onBackgroundMessage` (แสดงการแจ้งเตือนโดยอัตโนมัติ)

ตัวอย่างการเริ่มต้นใช้งานอย่างรวดเร็วของ JavaScript จะแสดงโค้ดทั้งหมดที่จำเป็นในการรับข้อความ

สำคัญ: คู่มือนี้กล่าวถึงการเริ่มต้นใช้งาน Firebase ใน Service Worker หากต้องการใช้ SDK แบบโมดูลาร์ใน Service Worker คุณต้องรวมไฟล์ Service Worker ไว้ด้วยกัน เนื่องจากโมดูล ES เป็นฟีเจอร์ใหม่และยังไม่ได้รับการรองรับอย่างกว้างขวาง (ดู โมดูล ES ใน Service Worker) หากไม่ต้องการรวมไฟล์ Service Worker ไว้ด้วยกัน คุณสามารถใช้ API ที่มี Namespace ซึ่งแพ็กเกจ Compat มีให้ หากต้องการดูวิธีใช้ตัวรวมโมดูลกับ Firebase โปรดดูการใช้ตัวรวมโมดูลกับ Firebase

จัดการข้อความเมื่อเว็บแอปอยู่เบื้องหน้า

หากต้องการรับเหตุการณ์ onMessage แอปของคุณต้องกำหนด Service Worker ของ Firebase Messaging ใน firebase-messaging-sw.js หรือคุณจะระบุ Service Worker ที่มีอยู่ให้กับ SDK ผ่าน getToken(): Promise<string> ก็ได้

Web

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging(firebaseApp);messaging_init_in_sw.js

Web

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
// Replace 10.13.2 with latest version of the Firebase JS SDK.
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();service-worker.js

เมื่อแอปอยู่เบื้องหน้า (ผู้ใช้กำลังดูหน้าเว็บ) คุณจะได้รับเพย์โหลดข้อมูลและการแจ้งเตือนในหน้าเว็บโดยตรง

Web

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.onBackgroundMessage` handler.
import { getMessaging, onMessage } from "firebase/messaging";

const messaging = getMessaging();
onMessage(messaging, (payload) => {
  console.log('Message received. ', payload);
  // ...
});messaging_receive_message.js

Web

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.onBackgroundMessage` handler.
messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
  // ...
});index.js

จัดการข้อความเมื่อเว็บแอปอยู่เบื้องหลัง

ข้อความทั้งหมดที่ได้รับขณะที่แอปอยู่เบื้องหลังจะทริกเกอร์การแจ้งเตือนแบบแสดงผลในเบราว์เซอร์ คุณสามารถระบุตัวเลือกสำหรับการแจ้งเตือนนี้ เช่น ชื่อหรือการดำเนินการเมื่อคลิก ในคำขอส่งจากเซิร์ฟเวอร์แอป หรือใช้ตรรกะของ Service Worker ในไคลเอ็นต์

ตั้งค่าตัวเลือกการแจ้งเตือนในคำขอส่ง

สำหรับข้อความแจ้งเตือนที่ส่งจากเซิร์ฟเวอร์แอป FCM JavaScript API รองรับ fcm_options.link คีย์ โดยปกติแล้วจะตั้งค่าเป็นหน้าในเว็บแอป ดังนี้

    https://fcm.googleapis.com/v1/projects/<YOUR-PROJECT-ID>/messages:send
    Content-Type: application/json
    Authorization: bearer <YOUR-ACCESS-TOKEN>

    {
      "message": {
        ,
        "notification": {
          "title": "Background Message Title",
          "body": "Background message body"
        },
        "webpush": {
          "fcm_options": {
            "link": "https://dummypage.com"
          }
        }
      }
    }

หากค่าลิงก์ชี้ไปยังหน้าที่เปิดอยู่ในแท็บเบราว์เซอร์อยู่แล้ว การคลิกการแจ้งเตือนจะนำแท็บนั้นมาไว้เบื้องหน้า หากหน้ายังไม่ได้เปิด การคลิกการแจ้งเตือนจะเปิดหน้าในแท็บใหม่

เนื่องจากข้อความข้อมูลไม่รองรับ fcm_options.link เราจึงแนะนำให้คุณ เพิ่มเพย์โหลดการแจ้งเตือนลงในข้อความข้อมูลทั้งหมด หรือคุณจะจัดการการแจ้งเตือนโดยใช้ Service Worker ก็ได้

ดูคำอธิบายความแตกต่างระหว่างข้อความแจ้งเตือนและข้อความข้อมูลได้ที่ ประเภทข้อความ

ตั้งค่าตัวเลือกการแจ้งเตือนใน Service Worker

สำหรับข้อความข้อมูล คุณสามารถตั้งค่าตัวเลือกการแจ้งเตือนใน Service Worker ได้ ก่อนอื่น ให้เริ่มต้นใช้งานแอปใน Service Worker ดังนี้

Web

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging(firebaseApp);messaging_init_in_sw.js

Web

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
// Replace 10.13.2 with latest version of the Firebase JS SDK.
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();service-worker.js

หากต้องการตั้งค่าตัวเลือก ให้เรียก onBackgroundMessage ใน firebase-messaging-sw.js ในตัวอย่างนี้ เราจะสร้างการแจ้งเตือนที่มีช่องชื่อ เนื้อหา และไอคอน

Web

import { getMessaging } from "firebase/messaging/sw";
import { onBackgroundMessage } from "firebase/messaging/sw";

const messaging = getMessaging();
onBackgroundMessage(messaging, (payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});messaging_on_background_message.js

Web

messaging.onBackgroundMessage((payload) => {
  console.log(
    '[firebase-messaging-sw.js] Received background message ',
    payload
  );
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});service-worker.js

แนวทางปฏิบัติแนะนำสำหรับการแจ้งเตือน

สำหรับนักพัฒนาแอปที่ส่ง การแจ้งเตือนผ่าน FCM สำหรับเว็บ สิ่งที่สำคัญที่สุดที่ต้องพิจารณา คือความแม่นยำและความเกี่ยวข้อง คำแนะนำเฉพาะบางส่วนในการทำให้การแจ้งเตือนมีความแม่นยำและเกี่ยวข้องมีดังนี้

ใช้ช่องไอคอนเพื่อส่งรูปภาพที่มีความหมาย สำหรับกรณีการใช้งานหลายๆ กรณี ควรใช้โลโก้บริษัทหรือแอปที่ผู้ใช้จดจำได้ทันที หรือสำหรับแอปพลิเคชันแชท อาจเป็นรูปโปรไฟล์ของผู้ใช้ที่ส่ง
ใช้ช่องชื่อเพื่อแสดงลักษณะที่แม่นยำของข้อความ เช่น "จิมมี่ตอบกลับแล้ว" ให้ข้อมูลที่แม่นยำกว่า "ข้อความใหม่" อย่าใช้พื้นที่ที่มีคุณค่านี้สำหรับชื่อบริษัทหรือแอป ให้ใช้ไอคอนแทน
อย่าใช้ชื่อหรือเนื้อหาการแจ้งเตือนเพื่อแสดงชื่อหรือโดเมนของเว็บไซต์ เนื่องจากโดยปกติแล้วการแจ้งเตือนจะมีชื่อโดเมนอยู่แล้ว
เพิ่ม fcm_options.link ซึ่งโดยปกติแล้วจะใช้เพื่อลิงก์ผู้ใช้กลับไปยังเว็บแอปและนำแอปมาไว้เบื้องหน้าในเบราว์เซอร์ ในบางกรณีที่พบไม่บ่อยนักซึ่งข้อมูลทั้งหมดที่คุณต้องการสื่อสารสามารถใส่ลงในการแจ้งเตือนได้ คุณอาจไม่จำเป็นต้องใช้ลิงก์