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

API FCM JavaScript 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 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 Firebase vào dự án JavaScript của bạn

Nếu bạn chưa có, hãy thêm Firebase vào dự án JavaScript của bạn .

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 .

Truy xuất đối tượng nhắn tin

Phiên bản web 9

import { getMessaging } from "firebase/messaging";

const messaging = getMessaging();

Phiên bản web 8

const messaging = firebase.messaging();

Đị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 xác thực khóa VAPID khi gửi yêu cầu tin nhắn đế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, hãy gọi getToken . Nếu quyền thông báo chưa được cấp, phương pháp này sẽ yêu cầu người dùng cấp quyền thông báo. Nếu không, nó sẽ trả về một mã thông báo hoặc từ chối lời hứa do lỗi.

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 máy khách.

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

Phiên bản web 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);
  // ...
});

Phiên bản web 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 cho Web (JavaScript):