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

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

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

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

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

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

Web version 9

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);

Web version 8

// 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.
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.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();

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

Web version 9

// 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);
  // ...
});

Web version 8

// 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);
  // ...
});

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

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

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

สำหรับข้อความแจ้งเตือนที่ส่งจากเซิร์ฟเวอร์แอป 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 คุณจึงควรเพิ่มเพย์โหลดการแจ้งเตือนไปยังข้อความข้อมูลทั้งหมด หรือคุณสามารถจัดการการแจ้งเตือนโดยใช้พนักงานบริการ

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

การตั้งค่าตัวเลือกการแจ้งเตือนในพนักงานบริการ

สำหรับข้อความข้อมูล คุณสามารถตั้งค่าตัวเลือกการแจ้งเตือนในเจ้าหน้าที่บริการ ขั้นแรก เริ่มต้นแอปของคุณในพนักงานบริการ:

Web version 9

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);

Web version 8

// 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.
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.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();

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

Web version 9

import { getMessaging } from "firebase/messaging";
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);
});

Web version 8

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);
});

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

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

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