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

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

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.

FCM JavaScript API cho phép bạn nhận tin nhắn thông báo trong các ứng dụng web đang chạy trên các trình duyệt hỗ trợ Push API . Đ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 cung cấp qua HTTPS. Điều này là do nó sử dụng các công nhân dịch vụ, chỉ khả dụng trên các trang web HTTPS. Nếu bạn cần một nhà cung cấp, thì Firebase Hosting được khuyến nghị và cung cấp một bậc 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 FCM JavaScript API, bạn 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 FCM SDK

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

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

Web version 9

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 version 8

import firebase from "firebase/app";
import "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
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, thì 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 rằng bạn đã đăng nhập vào Cloud Console bằng chính 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 bổ sung 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" để cho phép 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 tại 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 công khai và ngày được thêm vào.

Nhập một cặp khóa hiện có

Nếu bạn có một cặp khóa hiện có mà bạn đang sử dụng với ứng dụng web của mình, thì bạn có thể nhập cặp khóa đó vào FCM để bạn 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 công khai và khóa riêng hiện tại của bạn ở dạng được mã hóa an toàn cho 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 một 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 công khai và khóa riêng của bạn trong 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 được thêm vào.

Để 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 khóa, 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 chứng chỉ khóa VAPID khi gửi yêu cầu tin nhắn tới 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 đối tượng nhắn tin được truy xuất:

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ị, điều này sẽ trả về 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 . 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 tệp đó vào thư mục gốc của miền của bạ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 này trong quá trình thiết lập ứng dụng khách.

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

Web version 9

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 version 8

// 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ã thông báo đó đến máy chủ ứng dụng của bạn và lưu trữ mã thông báo đó bằng phương pháp ưa thích của bạn.

Bước tiếp theo

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