Bắt đầu sử dụng Giải pháp gửi thông báo qua đám mây của Firebase trong ứng dụng web

Chọn nền tảng: iOS+ Android Web Flutter Unity C++


Hướng dẫn này mô tả cách bắt đầu sử dụng Firebase Cloud Messaging trong các ứng dụng Web client để bạn có thể gửi tin nhắn một cách đáng tin cậy.

FCM JavaScript API cho phép bạn nhận thông báo trong các ứng dụng web chạy trên 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ó trong ma trận hỗ trợ này và các tiện ích Chrome sử dụng Push API.

SDK FCM chỉ được hỗ trợ trong các trang được phân phát qua HTTPS. Điều này là do Chrome sử dụng các worker dịch vụ, chỉ có trên các trang web HTTPS. Nếu bạn cần một nhà cung cấp, thì Firebase App Hosting là lựa chọn được đề xuất và cung cấp một cấp miễn phí để lưu trữ HTTPS trên miền của riêng bạn.

Để bắt đầu sử dụng API JavaScript FCM, bạn cần thêm Firebase vào ứng dụng web và thêm logic để truy cập vào Mã nhận dạng lượt cài đặt Firebase. Nhờ đó, bạn có thể chỉ định người nhận thông báo.

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

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

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

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 đ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 bảng điều khiển Google Cloud. Khi bật API, hãy nhớ đăng nhập vào bảng điều khiển Google Cloud bằng chính Tài khoản Google mà bạn dùng cho Firebase, đồng thời nhớ 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 đăng nhập trên web bằng FCM

Giao diện web FCM sử dụng thông tin đăng nhập trên web (còn gọi là khoá Nhận dạng máy chủ ứng dụng tự nguyện hoặc VAPID) để cho phép gửi các yêu cầu đến các dịch vụ thông báo đẩy trên web được hỗ trợ. Để đăng ký ứng dụng nhận thông báo đẩy, 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 Firebase.

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

  1. Trong bảng điều khiển Firebase, hãy chuyển đến phần Settings (Cài đặt) > General (Chung). Sau đó, hãy nhấp vào Cloud Messaging (Gửi thông báo qua đám mây)

  2. Chuyển đến mục Cấu hình web.

  3. Trong thẻ Web Push certificates (Chứng chỉ Web Push), hãy nhấp vào Generate Key Pair (Tạo cặp khoá).

    Bảng điều khiển sẽ hiển thị 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 đang dùng một cặp khoá với ứng dụng web của mình, 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à khoá riêng tư hiện có ở dạng được mã hoá an toàn bằng URL base64:

  1. Trong bảng điều khiển Firebase, hãy chuyển đến phần Settings (Cài đặt) > General (Chung). Sau đó, hãy nhấp vào Cloud Messaging (Gửi thông báo qua đám mây)

  2. Chuyển đến mục Cấu hình web.

  3. Trong thẻ Web Push certificates (Chứng chỉ Web Push), hãy tìm và chọn văn bản liên kết: import an existing key pair (nhập một cặp khoá hiện có).

  4. Trong hộp thoại Import a key pair (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ẽ hiển thị 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 trên web trong ứng dụng. Để biết thêm thông tin về định dạng của khoá và cách tạo khoá, hãy xem phần Khoá máy chủ ứng dụng.

Định cấu hình thông tin đăng nhập trên web trong ứng dụng

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

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

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

Yêu cầu cấp quyền gửi thông báo và định cấu hình trình chạy dịch vụ

Khi bạn cần nhắm đến một phiên bản ứng dụng bằng FCM, trước tiên, hãy yêu cầu người dùng cấp quyền nhận thông báo bằng Notification.requestPermission(). Khi được gọi như minh hoạ, lệnh này sẽ trả về trạng thái quyền nếu được cấp:

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 này vào thư mục gốc của miền trước khi đăng ký. 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.

Truy cập vào Mã nhận dạng lượt cài đặt Firebase

Cách đăng ký phiên bản ứng dụng và truy xuất mã nhận dạng lượt cài đặt Firebase (FID) để nhắm đến thông báo: 

import { getMessaging, onRegistered, register } from "firebase/messaging";

const messaging = getMessaging();

// 1. Implement callback to receive the Firebase installation ID upon registration.
// This is triggered every time a manual register() finishes, a FID change
// is detected, or a pushsubscriptionchange event is fired.
onRegistered(messaging, (installationId) => {
  console.log('Registered installation ID:', installationId);

  // Send the Firebase Installation ID to your app server and update the UI if needed.
  sendRegistrationToServer(installationId);
});

// 2. You can also manually trigger registration (recommended on app startup)
register(messaging, {
  vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>'
}).then(() => {
  // Success! The Firebase Installation ID can be used to target messages to this app
  // instance and will be delivered asynchronously to your onRegistered() callback.
}).catch((err) => {
  console.error('An error occurred while registering', err);
});

Lệnh gọi lại onRegistered được kích hoạt trong 3 trường hợp:

  1. Mỗi khi một lệnh gọi register() theo cách thủ công kết thúc.
  2. Đã phát hiện thấy thay đổi về mã nhận dạng lượt cài đặt Firebase.
  3. Sự kiện pushsubscriptionchange sẽ được kích hoạt.

Sau khi bạn nhận được Mã nhận dạng lượt cài đặt Firebase, hãy gửi mã này đến máy chủ ứng dụng và lưu trữ bằng phương thức mà bạn muốn.

Truy cập vào mã thông báo đăng ký (không dùng nữa)

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

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

Sau khi 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ữ bằng phương thức mà bạn muốn.

Gửi thông báo thử nghiệm

  1. Cài đặt và chạy ứng dụng trên thiết bị mục tiêu. Trên thiết bị Apple, bạn cần chấp nhận yêu cầu cấp quyền nhận thông báo từ xa.

  2. Kiểm tra để đảm bảo ứng dụng đang chạy ở chế độ nền trên thiết bị.

  3. Trong bảng điều khiển Firebase, hãy chuyển đến DevOps & Engagement (DevOps và mức độ tương tác) > Messaging (Nhắn tin)

  4. Tạo một chiến dịch.

    • Nếu đây là tin nhắn đầu tiên của bạn:

      1. Chọn Tạo chiến dịch đầu tiên.

      2. Chọn Thông báo của Firebase rồi chọn Tạo.

    • Nếu trước đây bạn đã tạo chiến dịch:

      1. Trên thẻ Chiến dịch, hãy chọn Chiến dịch mới.

      2. Nhấp vào Thông báo.

  5. Nhập nội dung tin nhắn.

  6. Chọn Gửi tin nhắn thử nghiệm trong ngăn bên phải.

  7. Trong trường có nhãn Thêm mã thông báo đăng ký FCM, hãy nhập mã thông báo đăng ký của bạn.

  8. Chọn Kiểm tra.

Sau khi bạn chọn Kiểm thử, thiết bị khách mục tiêu (với ứng dụng ở chế độ nền) sẽ nhận được thông báo.

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ể chọn một trong những cách sau để tiếp tục sử dụng FCM cho Web (JavaScript):