Nhận tin nhắn trong ứng dụng khách JavaScript

Hành vi của các thông báo khác nhau tùy thuộc vào việc trang nằm ở nền trước (có tiêu điểm) hay ở trong nền, ẩn sau các tab khác hoặc đã đóng hoàn toàn. Trong mọi trường hợp, trang phải xử lý lệnh gọi lại onMessage , nhưng trong các trường hợp nền, bạn cũng có thể cần xử lý onBackgroundMessage hoặc định cấu hình thông báo hiển thị để cho phép người dùng đưa ứng dụng web của bạn lên nền trước.

trạng thái ứng dụng Thông báo Dữ liệu Cả hai
Vấn đề xung quanh onMessage onMessage onMessage
Lý lịch (nhân viên phục vụ) onBackgroundMessage (hiển thị thông báo tự động hiển thị) onBackgroundMessage onBackgroundMessage (hiển thị thông báo tự động hiển thị)

Mẫu khởi động nhanh JavaScript thể hiện tất cả mã cần thiết để nhận tin nhắn.

Xử lý tin nhắn khi ứng dụng web của bạn ở phía trước

Để nhận sự kiện onMessage , ứng dụng của bạn phải xác định nhân viên dịch vụ nhắn tin Firebase trong firebase-messaging-sw.js . Ngoài ra, bạn có thể cung cấp một nhân viên dịch vụ hiện có cho SDK thông qua getToken(): Promise<string> .

Web modular API

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 namespaced API

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

Khi ứng dụng của bạn ở nền trước (người dùng hiện đang xem trang web của bạn), bạn có thể nhận dữ liệu và tải trọng thông báo trực tiếp trên trang.

Web modular API

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

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

Xử lý tin nhắn khi ứng dụng web của bạn ở chế độ nền

Tất cả các tin nhắn nhận được trong khi ứng dụng ở chế độ nền sẽ kích hoạt thông báo hiển thị trong trình duyệt. Bạn có thể chỉ định các tùy chọn cho thông báo này, chẳng hạn như tiêu đề hoặc thao tác nhấp, trong yêu cầu gửi từ máy chủ ứng dụng của bạn hoặc sử dụng logic của nhân viên dịch vụ trên máy khách.

Đặt tùy chọn thông báo trong yêu cầu gửi

Đối với các tin nhắn thông báo được gửi từ máy chủ ứng dụng, FCM JavaScript API hỗ trợ khóa fcm_options.link . Thông thường, điều này được đặt thành một trang trong ứng dụng web của bạn:

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"
      }
    }
  }
}

Nếu giá trị liên kết trỏ đến một trang đã được mở trong tab trình duyệt, thì một lần nhấp vào thông báo sẽ đưa tab đó vào nền trước. Nếu trang chưa được mở, một lần nhấp vào thông báo sẽ mở trang trong một tab mới.

Vì thông báo dữ liệu không hỗ trợ fcm_options.link , nên bạn nên thêm tải trọng thông báo vào tất cả thông báo dữ liệu. Ngoài ra, bạn có thể xử lý thông báo bằng nhân viên dịch vụ.

Để biết giải thích về sự khác biệt giữa thông báo và thông báo dữ liệu, hãy xem Các loại thông báo .

Đặt tùy chọn thông báo trong nhân viên dịch vụ

Đối với tin nhắn dữ liệu, bạn có thể đặt tùy chọn thông báo trong nhân viên dịch vụ. Đầu tiên, khởi tạo ứng dụng của bạn trong service worker:

Web modular API

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 namespaced API

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

Để đặt tùy chọn, hãy gọi onBackgroundMessage trong firebase-messaging-sw.js . Trong ví dụ này, chúng tôi tạo một thông báo với các trường tiêu đề, nội dung và biểu tượng.

Web modular API

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 namespaced API

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

Thực tiễn tốt nhất cho thông báo

Nếu bạn đã quen thuộc với tính năng nhắn tin đẩy cho web, bạn có thể đã đọc các nguyên tắc chung về điều gì tạo nên một thông báo tốt . Đối với các nhà phát triển gửi thông báo qua FCM cho Web, các cân nhắc quan trọng nhất là độ chính xác và mức độ phù hợp. Dưới đây là một số đề xuất cụ thể để giữ cho thông báo của bạn chính xác và phù hợp:

  • Sử dụng trường biểu tượng để gửi một hình ảnh có ý nghĩa. Đối với nhiều trường hợp sử dụng, đây phải là biểu trưng của công ty hoặc ứng dụng mà người dùng của bạn nhận ra ngay lập tức. Hoặc, đối với ứng dụng trò chuyện, đó có thể là hình ảnh hồ sơ của người dùng gửi.
  • Sử dụng trường tiêu đề để thể hiện bản chất chính xác của thông báo. Ví dụ: "Jimmy đã trả lời" truyền tải thông tin chính xác hơn "Tin nhắn mới". Không sử dụng không gian quý giá này cho tên công ty hoặc ứng dụng của bạn — hãy sử dụng biểu tượng cho mục đích đó.
  • Không sử dụng tiêu đề hoặc nội dung thông báo để hiển thị tên hoặc miền trang web của bạn; thông báo đã chứa tên miền của bạn.
  • Thêm fcm_options.link , thường để liên kết người dùng trở lại ứng dụng web của bạn và đưa ứng dụng đó vào tiêu điểm trong trình duyệt. Trong những trường hợp hiếm hoi mà tất cả thông tin bạn cần truyền tải có thể phù hợp với thông báo, bạn có thể không cần liên kết.