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

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

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

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

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

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

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

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

// 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

// 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

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

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

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

สำหรับข้อความแจ้งเตือนที่ส่งจากเซิร์ฟเวอร์ของแอป 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 ดังนี้

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

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

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

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

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