Trang này được dịch bởi Cloud Translation API.

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

API JavaScript FCM cho phép bạn nhận nội dung 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. Trong đó 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 của Chrome thông qua API đẩy.

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

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

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

Cài đặt Firebase JS SDK và khởi chạy Firebase nếu bạn chưa thực hiện.
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 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ật API này, hãy đảm bảo 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à nhớ chọn đúng dự án. Theo mặc định, các dự án mới thêm SDK FCM sẽ được bật API này.

Đị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 đăng nhập web có tên là "Nhận dạng máy chủ ứng dụng tự nguyện" hay khoá "VAPID" để cho phép gửi yêu cầu đến 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 khoá với dự án Firebase của mình. 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 Bảng điều khiển của Firebase.

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

Mở thẻ Gửi thông báo qua đám mây trong ngăn Cài đặt của bảng điều khiển của Firebase rồi di chuyể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á). Bảng điều khiển sẽ hiện thông báo cho biết cặp khoá đã được tạo, đồng thời hiển thị chuỗi khoá công khai và ngày đã thêm.

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

Nếu đã có cặp khoá đang sử dụng với ứng dụng web, bạn có thể nhập cặp khoá đó vào FCM để có thể truy cập vào các phiên bản ứng dụng web hiện có 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 khoá công khai và riêng tư hiện có dưới dạng mã hoá an toàn cho URL base64:

Mở thẻ Gửi thông báo qua đám mây trong ngăn Cài đặt của bảng điều khiển của Firebase rồi di chuyể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 đường liên kết "nhập một cặp khoá hiện có".
Trong hộp thoại Import a key key (Nhập một cặp khoá), hãy cung cấp khoá công khai và khoá riêng tư của bạn trong các trường tương ứng rồi nhấp vào Import (Nhập). Bảng điều khiển sẽ cho thấy chuỗi khoá công khai và ngày thêm.

Để biết hướng dẫn về cách thêm khoá vào ứng dụng, hãy xem phần Định cấu hình thông tin đăng nhập web trong ứng dụng. Để biết thêm thông tin về định dạng của khoá cũng như cách tạo khoá, hãy xem bài viết 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> này cho phép FCM sử dụng thông tin xác thực khoá VAPID khi gửi yêu cầu thông báo đến nhiều dịch vụ đẩy. Sử dụng khoá mà bạn đã tạo hoặc nhập theo hướng dẫn trong bài viết Định cấu hình thông tin xác thực web bằng FCM, hãy thêm khoá đó vào mã của bạn sau khi truy xuất đối tượng thông báo:

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 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. Trừ phi 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 đó 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 và lưu trữ bằng phương thức bạn ưu tiên.

Các 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ố cách để tiếp tục sử dụng FCM cho web (JavaScript):

Thêm chức năng vào ứng dụng để nhận thông báo.
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 một ứ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.