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

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

FCM SDK 僅支援透過 HTTPS 提供的網頁。這是因為該應用程式使用 Service Worker，而這項功能僅適用於 HTTPS 網站。如果您需要供應商，建議使用 Firebase 代管，這個服務提供免付費方案，讓您在自己的網域上使用 HTTPS 代管。

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

新增並初始化 FCM SDK

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

  2. 新增 Firebase Cloud Messaging JavaScript SDK 並初始化 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();

如果您目前使用網頁版 FCM，並想升級至 6.7.0 以上版本的 SDK，請務必在 Google Cloud 控制台中為專案啟用 FCM 註冊 API。啟用 API 時，請務必使用 Firebase 專用的 Google 帳戶登入 Cloud 控制台，並選取正確的專案。新增 FCM SDK 的新專案預設會啟用這項 API。

使用「FCM」設定網站憑證

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

產生新的金鑰組

  1. 開啟 Firebase 控制台「設定」窗格的「Cloud Messaging」分頁，然後捲動至「Web configuration」部分。
  2. 在「Web Push certificates」(網路推播憑證) 分頁中，按一下「Generate Key Pair」(產生金鑰組)。主控台會顯示金鑰組已產生的通知，以及公開金鑰字串和新增日期。

匯入現有金鑰組

如果您有現成金鑰組，且已用於網頁應用程式，可以將其匯入 FCM，以便透過 FCM API 存取現有的網頁應用程式例項。如要匯入金鑰，您必須擁有 Firebase 專案的擁有者層級存取權。以 Base64 URL 安全編碼形式匯入現有的公開和私密金鑰：

  1. 開啟 Firebase 控制台「設定」窗格的「Cloud Messaging」分頁，然後捲動至「Web configuration」部分。
  2. 在「Web Push certificates」(網頁推送通知憑證) 分頁中，找出並選取「import an existing key pair」(匯入現有金鑰配對) 連結文字。
  3. 在「匯入金鑰組」對話方塊中，在對應欄位提供公開和私密金鑰，然後按一下「匯入」。控制台會顯示公開金鑰字串和新增日期。

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

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

方法 getToken(): Promise<string> 可讓 FCM 在將訊息要求傳送至不同推送服務時，使用 VAPID 金鑰憑證。按照「使用 FCM 設定網頁憑證」一文中的操作說明產生或匯入金鑰後，請在擷取訊息物件後，將金鑰新增至程式碼：

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() 向使用者要求通知權限。如上所示呼叫時，如果授予權限，這會傳回權杖；如果拒絕，則會拒絕 Promise： 

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

取得權杖後，請將權杖傳送至應用程式伺服器，並使用偏好的方法儲存權杖。

後續步驟

完成設定步驟後，您可以選擇下列幾種方式，繼續使用網頁版 (JavaScript) 的 FCM：