| 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 máy khách web để bạn có thể gửi thông báo một cách đáng tin cậy.
API JavaScript của FCM cho phép bạn nhận thông báo trong các ứng dụng web chạy trên những trình duyệt hỗ trợ Push API. Những trình duyệt 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 Chrome sử dụng Push API.
SDK FCM chỉ được hỗ trợ trên các trang được phân phát qua HTTPS. Điều này là do SDK sử dụng trình thực thi 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ì nên dùng Firebase App Hosting. Dịch vụ này cung cấp một gói 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 của FCM, bạn cần thêm Firebase vào ứng dụng web 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
Nếu chưa có, hãy cài đặt Firebase JS SDK và khởi chạy Firebase.
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 FCM Registration API cho dự án của mình trong Google Cloud. Khi bật API, hãy nhớ đăng nhập vào Cloud Console bằng chính Tài khoản Google mà bạn dùng cho Firebase và nhớ chọn đúng dự án. Các dự án mới thêm FCM SDK sẽ bật API này theo mặc định.
Định cấu hình thông tin đăng nhập web bằng FCM
Giao diện web FCM sử dụng thông tin đăng nhập web có tên là Voluntary Application Server Identification (Nhận dạng máy chủ ứng dụng tự nguyện) hoặc khoá VAPID để uỷ quyền cho các yêu cầu gửi đế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. 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 console.
Tạo một cặp khoá mới
- Mở thẻ Cloud Messaging của ngăn Settings trong bảng điều khiển Firebase rồi chuyển đến phần Web configuration.
- Trong thẻ Web Push certificates (Chứng chỉ thông báo đẩy trên web), 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 có một cặp khoá hiện có mà bạn đang sử dụng với ứng dụng web, thì bạn có thể nhập cặp khoá đó vào FCM để có thể tiếp cận các thực thể ứng dụng web hiện có thông qua các 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 mã hoá an toàn cho URL base64:
- Mở thẻ Cloud Messaging của ngăn Settings trong bảng điều khiển Firebase rồi chuyển đến phần Web configuration.
- Trong thẻ Web Push certificates (Chứng chỉ thông báo đẩy trên web), hãy tìm và chọn văn bản có đường liên kết: import an existing key pair (nhập một cặp khoá hiện có).
- 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ư 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 Đị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 các khoá và cách tạo khoá, hãy xem Khoá máy chủ ứng dụng.
Định cấu hình thông tin đăng nhập web trong ứng dụng
Phương thức getToken(): Promise<string>
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
Định cấu hình thông tin đăng nhập web bằng FCM,
hãy thêm khoá đó 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 vào mã thông báo đăng ký
Khi cần truy xuất mã thông báo đăng ký hiện tại cho một thực thể ứng dụng, trước tiên
hãy yêu cầu người dùng cấp quyền gửi thông báo bằng Notification.requestPermission().
Khi được gọi như minh hoạ, phương thức này sẽ trả về một 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 có 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 đó vào 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); // ... });
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 và lưu trữ bằng phương thức mà bạn muốn.
Gửi thông báo thử nghiệm
- Cài đặt và chạy ứng dụng trên thiết bị mục tiêu. Trên các 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.
- Kiểm tra để đảm bảo ứng dụng đang chạy ở chế độ nền trên thiết bị.
- Trong bảng điều khiển của Firebase, hãy mở trang Nhắn tin.
- Nếu đây là thông báo đầu tiên của bạn, hãy chọn Create your first campaign (Tạo chiến dịch đầu tiên).
- Chọn Firebase Notification messages (Thông báo Firebase) rồi chọn Create (Tạo).
- Nếu không, trên thẻ Campaigns (Chiến dịch), hãy chọn New campaign (Chiến dịch mới) rồi chọn Notifications (Thông báo).
- Nhập nội dung tin nhắn.
- Chọn Send test message (Gửi thông báo thử nghiệm) trong ngăn bên phải.
- Trong trường có nhãn Add an FCM registration token (Thêm mã thông báo đăng ký), hãy nhập mã thông báo đăng ký.
- Chọn Test (Kiểm thử).
Sau khi bạn chọn Test (Kiểm thử), thiết bị ứng dụng mục tiêu (với ứng dụng chạy ở 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 vài lựa chọn để tiếp tục sử dụng FCM cho Web (JavaScript):