設定 JavaScript Firebase Cloud Messaging 用戶端應用

FCM JavaScript API 允許您在支持Push API的瀏覽器中運行的 Web 應用程序中接收通知消息。這包括此支持矩陣中列出的瀏覽器版本以及通過 Push API 的 Chrome 擴展。

僅在通過 HTTPS 提供服務的頁面中支持 FCM SDK。這是由於它使用了服務工作人員，而服務工作人員僅在 HTTPS 站點上可用。如果您需要提供商，建議使用Firebase Hosting ，它為您自己的域上的 HTTPS 託管提供免費層。

要開始使用 FCM JavaScript API，您需要將 Firebase 添加到您的 Web 應用程序並添加邏輯以訪問註冊令牌。

添加並初始化FCM SDK

  1. 如果您尚未安裝 Firebase JS SDK 並初始化 Firebase 。

  2. 添加 Firebase Cloud Messaging JS SDK 並初始化 Firebase Cloud Messaging：

網絡模塊化API

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 命名空間 API

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();

如果您當前使用的是網頁版 FCM 並想要升級到 SDK 6.7.0 或更高版本，則必須在 Google Cloud Console 中為您的項目啟用FCM 註冊 API 。啟用 API 時，請確保使用與 Firebase 相同的 Google 帳戶登錄 Cloud Console，並確保選擇正確的項目。添加 FCM SDK 的新項目默認啟用此 API。

使用 FCM 配置 Web 憑據

FCM Web 界面使用稱為“自願應用程序服務器標識”或“VAPID”密鑰的 Web 憑據來授權向支持的 Web 推送服務發送請求。要為您的應用訂閱推送通知，您需要將一對密鑰與您的 Firebase 項目關聯。您可以生成新的密鑰對，也可以通過 Firebase 控制台導入現有的密鑰對。

生成新的密鑰對

  1. 打開 Firebase 控制台“設置”窗格的“雲消息傳遞”選項卡，然後滾動到“Web 配置”部分。
  2. 在“Web 推送證書”選項卡中，單擊“生成密鑰對” 。控制台會顯示密鑰對已生成的通知，並顯示公鑰字符串和添加日期。

導入現有密鑰對

如果您有已在 Web 應用程序中使用的現有密鑰對，則可以將其導入 FCM，以便可以通過 FCM API 訪問現有的 Web 應用程序實例。要導入密鑰，您必須擁有 Firebase 項目的所有者級別訪問權限。以 Base64 URL 安全編碼形式導入現有的公鑰和私鑰：

  1. 打開 Firebase 控制台“設置”窗格的“雲消息傳遞”選項卡，然後滾動到“Web 配置”部分。
  2. 在“Web 推送證書”選項卡中，找到並選擇鏈接文本“導入現有密鑰對”。
  3. 在“導入密鑰對”對話框中，在相應字段中提供您的公鑰和私鑰，然後單擊“導入” 。控制台顯示公鑰字符串和添加日期。

有關如何將密鑰添加到應用程序的說明，請參閱在應用程序中配置 Web 憑據。有關密鑰格式以及如何生成密鑰的更多信息，請參閱應用程序服務器密鑰。

在您的應用程序中配置 Web 憑據

getToken(): Promise<string>方法允許 FCM 在向不同推送服務發送消息請求時使用 VAPID 密鑰憑證。使用根據使用FCM 配置 Web 憑據中的說明生成或導入的密鑰，在檢索消息傳遞對像後將其添加到代碼中：

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

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

訪問註冊令牌

當您需要檢索應用程序實例的當前註冊令牌時，首先使用Notification.requestPermission()向用戶請求通知權限。當如圖所示調用時，如果授予許可，則返回一個令牌；如果拒絕，則拒絕承諾：

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');

FCM 需要firebase-messaging-sw.js文件。除非您已經有firebase-messaging-sw.js文件，否則請在檢索令牌之前創建一個具有該名稱的空文件並將其放置在域的根目錄中。您可以稍後在客戶端設置過程中向文件添加有意義的內容。

要檢索當前令牌：

Web modular API

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 namespaced API

// 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

獲取令牌後，將其發送到您的應用服務器並使用您首選的方法存儲它。

下一步

完成設置步驟後，以下是繼續使用 FCM for Web (JavaScript) 的一些選項：