設定 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) 的選項：