หน้านี้ได้รับการแปลโดย Cloud Translation API

รับข้อความในไคลเอ็นต์ JavaScript

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

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

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

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

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

หากต้องการรับเหตุการณ์ onMessage แอปของคุณต้องกําหนด Firebase messaging service worker ใน 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": {
    "token": "eEz-Q2sG8nQ:APA91bHJQRT0JJ...",
    "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

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

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

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