設定 JavaScript Firebase 雲端通訊用戶端應用程式

透過 FCM JavaScript API，您可以在支援 Push API 的瀏覽器中所執行的網頁應用程式接收通知。這包含支援矩陣中列出的瀏覽器版本，以及透過 Push API 的 Chrome 擴充功能。

只有透過 HTTPS 提供的網頁才支援 FCM SDK。這是由於 Service Worker 所使用，而 Service Worker 只適用於 HTTPS 網站。如果您需要供應商，建議您使用 Firebase 託管，在自有網域上提供免付費的 HTTPS 代管服務。

如要開始使用 FCM JavaScript API，您必須將 Firebase 新增至網頁應用程式，並新增存取註冊權杖的邏輯。

新增並初始化 FCM SDK

如果您尚未安裝 Firebase JS SDK 並初始化 Firebase，請先完成這項操作。
新增 Firebase 雲端通訊 JS SDK 並初始化 Firebase 雲端通訊：

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

如果您目前使用的是網頁版 FCM，並想升級至 SDK 6.7.0 以上版本，就必須在 Google Cloud 控制台中為專案啟用 FCM Registration API。啟用 API 時，請務必使用與 Firebase 相同的 Google 帳戶登入 Cloud 控制台，並確認選取的專案正確無誤。根據預設，新增 FCM SDK 的新專案會啟用這個 API。

使用 FCM 設定 Web 憑證

FCM 網頁介面使用「自願應用程式伺服器識別」或「VAPID」金鑰的網頁憑證，授權將要求傳送至支援的網路推送服務。如要訂閱應用程式來推送通知，您必須將一組金鑰與 Firebase 專案建立關聯。您可以產生新的金鑰組，或透過 Firebase 控制台匯入現有的金鑰組。

產生新的金鑰組

開啟 Firebase 控制台的「Settings」(設定) 窗格中的「Cloud Messaging」(雲端通訊) 分頁標籤，然後捲動至「Web configuration」(網頁設定) 部分。
在「網路推送憑證」分頁中，按一下「產生金鑰配對」。控制台會顯示金鑰組已產生的通知，並顯示公開金鑰字串和新增日期。

匯入現有的金鑰組

如果現有的金鑰組已用於網頁應用程式，您可以將該金鑰組匯入 FCM，透過 FCM API 連結現有的網頁應用程式執行個體。如要匯入金鑰，您必須具備 Firebase 專案的擁有者層級存取權。以 Base64 網址安全編碼格式匯入現有的公開和私密金鑰：

開啟 Firebase 控制台的「Settings」(設定) 窗格中的「Cloud Messaging」(雲端通訊) 分頁標籤，然後捲動至「Web configuration」(網頁設定) 部分。
在「網路推送憑證」分頁中，找出並選取「匯入現有的金鑰組」連結文字。
在「Import a keyPair」(匯入金鑰組) 對話方塊中，在對應的欄位中提供您的公開和私密金鑰，然後按一下「Import」。控制台會顯示公開金鑰字串和新增的日期。

如要瞭解如何將金鑰新增至應用程式，請參閱「在應用程式中設定網頁憑證」。如要進一步瞭解金鑰的格式和產生方式，請參閱「應用程式伺服器金鑰」。

在應用程式中設定網路憑證

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

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

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

為應用程式新增功能，以接收訊息。
您可以參加我們的教學課程之一：將第一則訊息傳送至背景的應用程式或將訊息傳送至多個裝置。
查看完整的 GitHub 範例。
檢閱 JavaScript 參考資料。
觀看實作 API 的逐步操作說明影片。