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

Hoạt động của thông báo sẽ khác nhau tùy thuộc vào việc trang đó ở nền trước (có tiêu điểm) hay ở nền, ẩn sau các tab khác hay đó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
Bối cảnh (nhân viên phục vụ) onBackgroundMessage (thông báo hiển thị tự động hiển thị) onBackgroundMessage onBackgroundMessage (thông báo hiển thị tự động hiển thị)

Mẫu khởi động nhanh JavaScript minh họa 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 ở nền trước

Để nhận được 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 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);

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

Khi ứng dụng của bạn chạy ở 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);
  // ...
});

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

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

Tất cả tin nhắn nhận được 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 hành động nhấp chuột, 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, API FCM JavaScript 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 đã mở trong tab trình duyệt, thì một cú nhấp chuột vào thông báo sẽ đưa tab đó lên nền trước. Nếu trang chưa được mở, một lần nhấp thông báo sẽ mở trang trong tab mới.

Vì tin nhắn 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ả tin nhắn dữ liệu. Ngoài ra, bạn có thể xử lý thông báo bằng cách sử dụ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à tin nhắn dữ liệu, hãy xem Loại tin nhắn .

Đặ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 nhân viên dịch vụ:

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

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

Để đặ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 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);
});

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

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

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

  • Sử dụng trường biểu tượng để gửi hình ảnh có ý nghĩa. Đối với nhiều trường hợp sử dụng, đây phải là biểu tượ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à ảnh hồ sơ của người gửi.
  • Sử dụng trường tiêu đề để thể hiện bản chất chính xác của tin nhắn. 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 quay lại ứng dụng web của bạn và tập trung vào ứng dụng đó trong trình duyệt. Trong những trường hợp hiếm hoi khi tất cả thông tin bạn cần truyền tải đều có thể đưa vào thông báo, bạn có thể không cần liên kết.