Thiết lập ứng dụng khách Nhắn tin qua đám mây JavaScript Firebase

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

SDK FCM chỉ được hỗ trợ trong các trang được phân phát qua HTTPS. Điều này là do nó sử dụng các nhân viên dịch vụ, vốn chỉ có trên các trang HTTPS. Nếu bạn cần một nhà cung cấp, Firebase Hosting được khuyên dùng và cung cấp cấp độ miễn phí cho dịch vụ lưu trữ HTTPS trên miền của riêng bạn.

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

Thêm và khởi tạo SDK FCM

  1. Nếu bạn chưa có, hãy cài đặt SDK Firebase JS và khởi chạy Firebase .

  2. Thêm SDK JS nhắn tin qua đám mây Firebase và khởi tạo Nhắn tin qua đám mây Firebase:

API mô-đun 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);

API không gian tên 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 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 sử dụng cho Firebase và đảm bảo chọn đúng dự án. Các dự án mới thêm SDK FCM sẽ bật API này theo mặc định.

Định cấu hình thông tin xác thực web với FCM

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

Tạo cặp khóa mới

  1. Mở tab Nhắn tin qua đám mây của ngăn Cài đặt bảng điều khiển Firebase và cuộn đến phần Cấu hình web .
  2. Trong tab Chứng chỉ đẩy Web , nhấp vào Tạo cặp khóa . Bảng điều khiển hiển thị thông báo rằng cặp khóa đã được tạo và hiển thị chuỗi khóa chung cũng như ngày thêm.

Nhập cặp khóa hiện có

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

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

Để biết hướng dẫn về cách thêm khóa vào ứng dụng của bạn, hãy xem Định cấu hình thông tin xác thực web trong ứng dụng của bạn . Để biết thêm thông tin về định dạng của khóa và cách tạo chúng, hãy xem Khóa 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 khóa VAPID khi gửi yêu cầu tin nhắn đến các dịch vụ đẩy khác nhau. Sử dụng khóa bạn đã tạo hoặc nhập theo hướng dẫn trong Định cấu hình thông tin xác thực web bằng FCM , thêm khóa đó 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 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 quyền thông báo từ người dùng bằng Notification.requestPermission() . Khi được gọi như được hiển thị, mã này sẽ trả về mã thông báo nếu được cấp quyền 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 . Trừ khi bạn đã có tệp firebase-messaging-sw.js , hãy tạo một tệp trống có tên đó và đặt nó vào thư mục gốc của miền trước khi truy xuất mã thông báo. Bạn có thể thêm nội dung có ý nghĩa vào tệp sau trong quá trình thiết lập máy khách.

Để lấy mã thông báo hiện tại:

Web modular API

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

Web namespaced API

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

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ữ mã đó bằng phương pháp ưa thích của bạn.

Bước tiếp theo

Sau khi bạn đã hoàn tất các bước thiết lập, đây là một số tùy chọn để tiếp tục với FCM dành cho Web (JavaScript):