Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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