Nhận thông báo trong ứng dụng JavaScript

Hành vi của thông báo sẽ khác nhau tuỳ thuộc vào việc trang ở nền trước (có tiêu điểm) hay ở nền sau, bị ẩn sau các thẻ khác hoặc hoàn toàn bị đóng. 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 ở chế độ 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 vào nền trước.

Trạng thái ứng dụng Thông báo Dữ liệu Cả hai
Màu nổi onMessage onMessage onMessage
Nền (trình chạy dịch vụ) onBackgroundMessage (thông báo hiển thị tự động xuất hiện) onBackgroundMessage onBackgroundMessage (thông báo hiển thị tự động xuất hiện)

Mẫu bắt đầu nhanh bằng JavaScript minh hoạ tất cả mã cần thiết để nhận thông báo.

Xử lý thông báo khi ứng dụng web của bạn đang chạy trên nền trước

Để nhận được sự kiện onMessage, ứng dụng của bạn phải xác định trình chạy dịch vụ nhắn tin Firebase trong firebase-messaging-sw.js. Ngoài ra, bạn có thể cung cấp một worker dịch vụ hiện có cho SDK thông qua 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

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 trong trang.

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

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

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

Thiết lập các lựa chọn thông báo trong yêu cầu gửi

Đối với thông báo được gửi từ máy chủ ứng dụng, API JavaScript FCM hỗ trợ khoá fcm_options.link. Thông thường, tham số 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ị đường liên kết trỏ đến một trang đã mở trong thẻ trình duyệt, thì thao tác nhấp vào thông báo sẽ đưa thẻ đó lên nền trước. Nếu trang chưa mở, thao tác nhấp vào thông báo sẽ mở trang trong một thẻ mới.

Vì thông báo dữ liệu không hỗ trợ fcm_options.link, 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 trình chạy dịch vụ.

Để biết nội dung 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 phần Các loại thông báo.

Đặt các lựa chọn thông báo trong worker dịch vụ

Đối với thông báo dữ liệu, bạn có thể đặt các lựa chọn thông báo trong worker dịch vụ. Trước tiên, hãy khởi động ứng dụng của bạn trong worker dịch vụ:

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

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

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

Các phương pháp hay nhất cho thông báo

Nếu đã quen với tính năng gửi thông báo đẩy cho web, có thể bạn đã đọc các nguyên tắc chung về những yếu tố tạo nên một thông báo hiệu quả. Đối với những nhà phát triển gửi thông báo qua FCM cho Web, những yếu tố quan trọng nhất cần cân nhắc là độ chính xác và mức độ liên quan. Sau đây là một số đề xuất cụ thể để đảm bảo 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 nhận ra ngay lập tức. Hoặc đối với một ứng dụng trò chuyện, đó có thể là ảnh hồ sơ của người dùng gửi.
  • Sử dụng trường tiêu đề để thể hiện chính xác bản chất 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 so với "Tin nhắn mới". Đừng sử dụng khoảng trống có giá trị này cho tên công ty hoặc tên ứng dụng của bạn – hãy sử dụng biểu tượng cho mục đích đó.
  • Đừng sử dụng tiêu đề hoặc nội dung thông báo để hiển thị tên trang web hoặc miền 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 là để 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 một số ít trường hợp, nếu có thể truyền tải tất cả thông tin cần thiết vào thông báo, thì bạn có thể không cần đường liên kết.