Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

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

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Hành vi của 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ý lệnh gọi lại 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 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
Vấn đề xung quanh onMessage onMessage onMessage
Bối cảnh (nhân viên dịch 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 bắt đầu nhanh JavaScript trình bày tất cả mã cần thiết để nhận thông báo.

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 một service worker hiện có cho SDK thông qua getToken(): Promise<string> .

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

Web version 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/9.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.2.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.

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

Web version 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ả 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 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 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 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 , bạn nên thêm tải trọng thông báo vào tất cả các thông báo dữ liệu. Ngoài ra, bạn có thể xử lý các thông báo bằng service worker.

Để 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 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. Đầu tiên, khởi chạy ứng dụng của bạn trong service worker:

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

Web version 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/9.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.2.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();

Để đặt các 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 version 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);
});

Web version 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 thông báo đẩy cho web, bạn có thể đã đọc các nguyên tắc chung về những 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 độ 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 người dùng trở lại ứng dụng web của bạn và đưa nó vào tiêu điể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.