Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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.

API JavaScript FCM 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 các 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 Đẩy.

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ụ, chỉ có sẵn trên các trang HTTPS. Nếu bạn cần một nhà cung cấp, Firebase Hosting được khuyến nghị và cung cấp một 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 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 chạy FCM SDK

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

  2. Thêm SDK JS của Firebase Cloud Messaging và khởi chạy Firebase Cloud Messaging:

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, 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 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 FCM SDK có API này được bật theo mặc định.

Định cấu hình thông tin đăng nhập 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 đến 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 một 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 tại 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ể truy cập 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 tư hiện có của bạn ở dạng 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 , hãy 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 tư của bạn trong các trường tương ứng và 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 xác thực 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 đăng nhập khóa VAPID khi gửi yêu cầu thông báo đế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 đăng nhập web với FCM , thêm khóa đó vào mã của bạn sau khi đối tượng nhắn tin được truy xuất:

// Add the public key generated from the console here.
messaging.getToken({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 với Notification.requestPermission() . Khi được gọi như được hiển thị, điều này 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 . Trừ khi bạn đã có tệp firebase-messaging-sw.js , hãy tạo một tệp trống với tên đó và đặt nó 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 nó đến máy chủ ứng dụng của bạn và lưu trữ nó 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, dưới đây là một số tùy chọn để tiếp tục với FCM dành cho Web (JavaScript):