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

FCM JavaScript API 可讓你在在支援 Push API。這份清單中列出的瀏覽器版本支援矩陣和 Chrome 擴充功能透過 Push API

只有透過 HTTPS 提供的網頁才支援 FCM SDK。這是原因在於，只有 HTTPS 網站可以使用 Service Worker。如果我有供應商，Firebase 託管是並提供免付費方案。

如要開始使用 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 以上版本，您必須啟用 FCM Registration API 為專案建立範本啟用 API 時，請確認您是登入 Cloud 控制台時使用的 Google 帳戶 Firebase，請務必選取正確的專案。新專案會新增 FCM SDK 預設已啟用這個 API。

使用 FCM 設定 Web 憑證

FCM 網頁介面使用稱為「自願性」的網頁憑證應用程式伺服器識別」一文或「VAPID」金鑰，藉此授權傳送要求新增至支援的網路推送服務如要訂閱應用程式推播通知，您必須必須將一對金鑰連結至 Firebase 專案。你可以採取以下任一做法：產生新的金鑰組，或透過 Firebase 匯入現有的金鑰組控制台。

產生新的金鑰組

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

匯入現有的金鑰組

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

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

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

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

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 (JavaScript)：

為應用程式加入功能接收訊息。
歡迎嘗試我們的任一教學課程：將第一則訊息傳送至背景的應用程式或將訊息傳送至多部裝置。
查看完整的 GitHub 範例。
檢閱 JavaScript 參考資料。
觀看導入也能使用 Google Cloud CLI 或 Compute Engine API