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

FCM JavaScript API 可讓您在 在支援 Push API。 包括這份支援矩陣中列出的瀏覽器版本,以及透過 Push API 的 Chrome 擴充功能。

FCM SDK 僅支援透過 HTTPS 提供的網頁。這是 原因在於,只有 HTTPS 網站可以使用 Service Worker。如果您需要供應商,建議使用 Firebase 代管,這項服務可讓您在自己的網域上免費代管 HTTPS。

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

新增及初始化 FCM SDK

  1. 如果您還沒有這樣做, 安裝 Firebase JS SDK 並初始化 Firebase

  2. 新增 Firebase Cloud Messaging JS 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 網頁版,且想要升級至 SDK 6.7.0 以上版本,您必須啟用 FCM Registration API 供您管理專案使用啟用 API 時,請確認 您是登入 Cloud 控制台時使用的 Google 帳戶 Firebase,請務必選取正確的專案。新專案會新增 FCM 個 SDK 預設已啟用這個 API。

使用 FCM 設定 Web 憑證

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

產生新的金鑰組

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

匯入現有的金鑰組

如果目前已有金鑰組已用於網頁應用程式, 能匯入至 FCM,方便您使用現有的網頁應用程式 透過 FCM API 存取執行個體如要匯入金鑰,您必須具備 具備 Firebase 專案的擁有者層級存取權以 Base64 URL 安全編碼格式匯入現有的公開金鑰和私密金鑰:

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

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

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

方法 getToken(): Promise<string> 可讓 FCM 在傳送訊息要求給不同的推播服務時,使用 VAPID 金鑰憑證。使用您產生或匯入的金鑰 請依照 使用 FCM 設定 Web Credentials, 請在擷取訊息物件後,將其新增至程式碼中:

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);
  // ...
});

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);
  // ...
});

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

後續步驟

完成設定步驟後,你可以嘗試透過下列幾種方式遷移 以 FCM 網頁版 (JavaScript):