Trang này được dịch bởi Cloud Translation API.

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

Hành vi của các thông báo sẽ khác nhau tuỳ thuộc vào liệu trang nằm ở nền trước (có tiêu điểm) hay ở chế độ nền, bị ẩn phía 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ý onMessage nhưng trong trường hợp nền, bạn cũng có thể cần xử lý onBackgroundMessage hoặc định cấu hình hiển thị thông báo để cho phép người dùng đưa ứng dụng web lên 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ị sẽ tự động hiển thị)	`onBackgroundMessage`	`onBackgroundMessage` (thông báo hiển thị sẽ tự động hiển thị)

Mẫu bắt đầu nhanh 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 chạy ở 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 trình chạy 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.
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 chạy ở nền trước (người dùng đang xem trang web của bạn) ), bạn có thể nhận được dữ liệu và thông báo tải trọng dữ liệu ngay 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ý thông báo khi ứng dụng web của bạn chạy trong nền

Tất cả tin nhắn nhận được khi ứng dụng đang chạy trong nền sẽ kích hoạt màn hình trong trình duyệt. Bạn có thể chỉ định các tuỳ 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, hoặc sử dụng logic của trình chạy dịch vụ trên ứng dụng.

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

Đối với nội dung thông báo được gửi từ máy chủ ứng dụng, FCM API JavaScript hỗ trợ fcm_options.link . Thông thường, đơn vị 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, một lượt 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 giao diện 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à tin nhắn dữ liệu, hãy xem Loại thông báo.

Đặt các tuỳ chọn thông báo trong trình chạy dịch vụ

Đối với thông báo dữ liệu, bạn có thể đặt các tuỳ chọn thông báo trong trình chạy dịch vụ. Trước tiên, hãy khởi chạy ứng dụng của bạn trong trình chạy 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.
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 các lựa chọn, hãy gọi lệnh 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 về thông báo

Nếu đã quen thuộc với thông báo đẩy cho web, có thể bạn đã đọc nguyên tắc chung về những nội dung tạo nên thông báo hữu ích. Dành cho nhà phát triển gửi thông qua FCM cho web, những điểm quan trọng nhất bạn cần cân nhắc đó là sự chính xác và phù hợp. Sau đây là một số đề xuất cụ thể giúp bạn duy trì các thông báo của bạn một cách 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, điều này phải là biểu trưng công ty hoặc ứng dụng mà người dùng của bạn có thể nhận ra ngay. 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 thư.
Sử dụng trường tiêu đề để diễn đạt chính xác bản chất của thư. 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 tên ứng dụng của bạn — sử dụng biểu tượng cho 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 của bạn hoặc miề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à đưa người dùng nó vào tiêu điểm trong trình duyệt. Trong một số ít trường hợp khi tất cả thông tin bạn cần phù hợp với thông báo nên có thể bạn không cần đường liên kết.