Nhận tin nhắn trong ứng dụng 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ền trước (có tiêu điểm) hay ở nền sau, ẩ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ý các onMessage gọi lại, nhưng trong trường hợp nền bạn cũng có thể cần phải xử lý onBackgroundMessage hoặc cấu hình các 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 foreground.

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 dịch vụ) onBackgroundMessage (hiển thị thông báo tự động được hiển thị) onBackgroundMessage onBackgroundMessage (hiển thị thông báo tự động được hiển thị)

JavaScript mẫu QuickStart cho thấy tất cả cá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 onMessage sự kiện, ứng dụng của bạn phải xác định gửi tin nhắn nhân viên dịch vụ căn cứ hỏa lực 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ó để SDK qua getToken(): Promise<string> .

Phiên bản web 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);

Phiên bản web 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();

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 thông báo trực tiếp trong trang.

Phiên bản web 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);
  // ...
});

Phiên bản web 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);
  // ...
});

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 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 hành động 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 tin nhắn thông báo được gửi từ máy chủ ứng dụng, API FCM JavaScript hỗ trợ các fcm_options.link then chốt. 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.

Bởi vì thông điệp dữ liệu không hỗ trợ fcm_options.link , bạn được khuyến khích để thêm một tải trọng thông báo đến tất cả các thông điệp dữ liệu. Ngoài ra, bạn có thể xử lý các thông báo bằng service worker.

Để giải thích về sự khác biệt giữa thông báo và dữ liệu bài viết, thấy tin nhắn loại .

Đặt các tùy chọn thông báo trong service worker

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

Phiên bản web 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);

Phiên bản web 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();

Để thiết lập tùy chọn, 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.

Phiên bản web 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);
});

Phiên bản web 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);
});

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

Nếu bạn quen với nhắn tin push cho web, bạn có thể đã đọc các hướng dẫn rộng rãi cho những gì làm cho 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 độ liên quan. 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 một ứng dụng trò chuyện, nó có thể là hình ảnh hồ sơ của người dùng đang gửi.
  • Sử dụng trường tiêu đề để thể hiện bản chất chính xác của thông điệp. 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 có giá trị 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 trang web hoặc miền của bạn; thông báo đã có tên miền của bạn.
  • Thêm fcm_options.link , thường liên kết phía sau dùng để ứng dụng web của bạn và đưa nó vào trọng tâm trong trình duyệt. Trong một số 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.