Check out what’s new from Firebase at Google I/O 2022. Learn more

設置 JavaScript Firebase 雲消息傳遞客戶端應用

FCM JavaScript API 允許您在支持Push API的瀏覽器中運行的 Web 應用程序中接收通知消息。這包括此支持矩陣中列出的瀏覽器版本和通過 Push API 進行的 Chrome 擴展。

FCM SDK 僅在通過 HTTPS 提供的頁面中受支持。這是由於它使用了僅在 HTTPS 站點上可用的服務工作者。如果您需要提供商,建議使用Firebase 託管,並為您自己的域上的 HTTPS 託管提供免費層級。

要開始使用 FCM JavaScript API,您需要將 Firebase 添加到您的網絡應用並添加邏輯以訪問註冊令牌。

添加並初始化 FCM SDK

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

  2. 添加 Firebase Cloud Messaging JS SDK 並初始化 Firebase Cloud Messaging:

Web version 9

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 version 8

import firebase from "firebase/app";
import "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
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. Import a key pair對話框中,在相應字段中提供您的公鑰和私鑰,然後單擊Import 。控制台顯示公鑰字符串和添加日期。

有關如何將密鑰添加到您的應用程序的說明,請參閱在您的應用程序中配置 Web 憑據。有關密鑰格式以及如何生成它們的更多信息,請參閱應用程序服務器密鑰

在您的應用程序中配置 Web 憑據

getToken(): Promise<string>方法允許 FCM 在向不同的推送服務發送消息請求時使用 VAPID 密鑰憑證。使用您根據使用 FCM 配置 Web 憑據中的說明生成或導入的密鑰,在檢索到消息傳遞對像後將其添加到您的代碼中:

// Add the public key generated from the console here.
messaging.getToken({vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

訪問註冊令牌

當您需要檢索應用程序實例的當前註冊令牌時,請調用getToken 。如果未授予通知權限,此方法將向用戶請求通知權限。否則,它會返回一個令牌或由於錯誤而拒絕承諾。

FCM 需要一個firebase-messaging-sw.js文件。除非您已經有firebase-messaging-sw.js文件,否則請創建一個具有該名稱的空文件並將其放在域的根目錄中,然後再檢索令牌。您可以稍後在客戶端設置過程中將有意義的內容添加到文件中。

要檢索當前令牌:

Web version 9

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 version 8

// 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 for Web (JavaScript):