Thiết lập ứng dụng nhắn tin qua đám mây của Firebase dành cho JavaScript

FCM JavaScript API cho phép bạn nhận nội dung thông báo bằng ứng dụng web chạy trong những trình duyệt hỗ trợ API đẩy. bao gồm cả các phiên bản trình duyệt được liệt kê trong ma trận hỗ trợ và tiện ích của Chrome thông qua Push API.

SDK FCM chỉ được hỗ trợ trên các trang được phân phát qua HTTPS. Đây là do sử dụng trình chạy dịch vụ (service worker chỉ có trên các trang web HTTPS). Nếu bạn cần một nhà cung cấp, dịch vụ Lưu trữ Firebase là được đề xuất và cung cấp cấp miễn phí cho việc lưu trữ HTTPS trên miền của riêng bạn.

Để bắt đầu với FCM JavaScript API, bạn cần thêm Firebase vào ứng dụng web của bạn và thêm logic để truy cập mã thông báo đăng ký.

Thêm và khởi chạy SDK FCM

Nếu bạn chưa thực hiện, cài đặt Firebase JS SDK và khởi chạy Firebase.
Thêm SDK JS của Giải pháp gửi thông báo qua đám mây của Firebase và khởi chạy Giải pháp gửi thông báo qua đám mây của Firebase:

Web

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = getMessaging(app);

Web

import firebase from "firebase/compat/app";
import "firebase/compat/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = firebase.messaging();

Nếu bạn hiện đang sử dụng FCM cho web và muốn nâng cấp lên SDK 6.7.0 trở lên, bạn phải bật API đăng ký FCM cho dự án của mình trong Google Cloud Console. Khi bạn bật API,hãy đảm bảo bạn đã đăng nhập vào Cloud Console bằng cùng một Tài khoản Google mà bạn dùng Firebase và hãy nhớ chọn đúng dự án. Các dự án mới thêm FCM SDK được bật API này theo mặc định.

Định cấu hình thông tin xác thực web bằng FCM

Giao diện web FCM sử dụng thông tin xác thực web có tên là "Voluntary Nhận dạng máy chủ ứng dụng" hoặc "VAPID" khoá, để cho phép gửi các yêu cầu sang các dịch vụ đẩy web được hỗ trợ. Để đăng ký nhận thông báo đẩy cho ứng dụng, bạn cần liên kết một cặp khóa với dự án Firebase của bạn. Bạn có thể: tạo một cặp khoá mới hoặc nhập cặp khoá hiện có thông qua Firebase Bảng điều khiển.

Tạo một cặp khoá mới

Mở Thẻ Nhắn tin qua đám mây trong phần Cài đặt bảng điều khiển của Firebase và cuộn đến phần Cấu hình web.
Trong thẻ Web Push Certificate (Chứng chỉ về thông báo đẩy trên web), hãy nhấp vào Generate Key Play (Tạo cặp khoá). Chiến lược phát hành đĩa đơn bảng điều khiển hiển thị một thông báo rằng cặp khoá đã được tạo, đồng thời cho thấy chuỗi khoá công khai và ngày được thêm.

Nhập một cặp khoá hiện có

Nếu bạn đang dùng một cặp khoá đang dùng cho ứng dụng web, có thể nhập tệp đó vào FCM để bạn có thể truy cập ứng dụng web hiện tại của mình thông qua API FCM. Để nhập khoá, bạn phải có quyền truy cập cấp chủ sở hữu vào dự án Firebase. Nhập công khai hiện có và khoá riêng tư ở dạng mã hoá an toàn cho URL bằng base64:

Mở Thẻ Nhắn tin qua đám mây trong phần Cài đặt bảng điều khiển của Firebase và cuộn đến phần Cấu hình web.
Trong thẻ Web Push Certificate (Chứng chỉ về thông báo đẩy trên web), hãy tìm và chọn văn bản liên kết, "nhập một cặp khoá hiện có".
Trong hộp thoại Nhập cặp khoá, hãy cung cấp khoá công khai và riêng tư của bạn trong vào các trường tương ứng, rồi nhấp vào Nhập. Bảng điều khiển này sẽ hiển thị thông tin công khai chuỗi khoá và ngày được thêm.

Để biết hướng dẫn về cách thêm khoá vào ứng dụng, hãy xem Định cấu hình thông tin đăng nhập Web trong ứng dụng của bạn. Để biết thêm thông tin về định dạng của khoá và cách tạo khoá, xem Khoá máy chủ ứng dụng.

Định cấu hình thông tin đăng nhập web trong ứng dụng của bạn

Phương thức getToken(): Promise<string> cho phép FCM sử dụng thông tin xác thực khoá VAPID khi gửi thông báo đến các dịch vụ đẩy khác nhau. Sử dụng khoá bạn đã tạo hoặc nhập theo hướng dẫn trong Định cấu hình thông tin đăng nhập web bằng FCM, thêm đối tượng này vào mã của bạn sau khi truy xuất đối tượng nhắn tin:

import { getMessaging, getToken } from "firebase/messaging";

const messaging = getMessaging();
// Add the public key generated from the console here.
getToken(messaging, {vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

Truy cập vào mã thông báo đăng ký

Khi bạn cần truy xuất mã thông báo đăng ký hiện tại cho một phiên bản ứng dụng, trước tiên hãy yêu cầu người dùng cấp quyền gửi thông báo bằng Notification.requestPermission(). Khi được gọi như minh hoạ, hàm này sẽ trả về một mã thông báo nếu quyền đã được cấp hoặc từ chối lời hứa nếu bị từ chối:

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');

FCM yêu cầu tệp firebase-messaging-sw.js. Nếu bạn không có tệp firebase-messaging-sw.js, hãy tạo một tệp trống bằng tên đó và đặt tên đó trong thư mục gốc của miền trước khi truy xuất mã thông báo. Sau này, bạn có thể thêm nội dung có ý nghĩa vào tệp trong quá trình thiết lập ứng dụng.

Cách truy xuất mã thông báo hiện tại:

Web

import { getMessaging, getToken } from "firebase/messaging";

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
const messaging = getMessaging();
getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});messaging_get_token.js

Web

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken({ vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});index.js

Sau khi bạn nhận được mã thông báo, hãy gửi mã đó đến máy chủ ứng dụng của bạn và lưu trữ bằng cách dùng phương thức bạn ưa dùng.

Các bước tiếp theo

Sau khi hoàn tất các bước thiết lập, bạn có thể tham khảo một số cách chuyển chuyển tiếp bằng FCM cho Web (JavaScript):

Thêm chức năng vào ứng dụng của bạn vào nhận tin nhắn.
Hãy thử một trong các hướng dẫn của chúng tôi: Gửi tin nhắn đầu tiên đến ứng dụng chạy trong nền hoặc Gửi tin nhắn đến nhiều thiết bị.
Xem xét mẫu hoàn chỉnh trên GitHub.
Xem lại tài liệu tham khảo về JavaScript.
Xem video hướng dẫn từng bước về cách triển khai API.