Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

設置 JavaScript Firebase Cloud Messaging 客戶端應用

該FCM的JavaScript API,您可以在支持的瀏覽器中運行Web應用程序收到通知郵件推送API 。這包括在此列出的瀏覽器版本支持矩陣通過推式API和Chrome擴展。

FCM SDK 僅在通過 HTTPS 提供服務的頁面中受支持。這是因為它使用了僅在 HTTPS 站點上可用的服務工作線程。如果你需要一個供應商,火力地堡主機推薦免費HTTPS託管在自己的域名。

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

將 Firebase 添加到您的 JavaScript 項目

如果你還沒有準備好,加入到火力地堡你的JavaScript項目

如果您目前正在使用的網絡FCM和希望升級到SDK 6.7.0或更高版本,您必須啟用FCM註冊API在谷歌雲端控制台項目。啟用 API 時,請確保使用與 Firebase 相同的 Google 帳戶登錄 Cloud Console,並確保選擇正確的項目。添加 FCM SDK 的新項目默認啟用此 API。

使用 FCM 配置 Web 憑證

FCM Web 界面使用稱為“自願應用程序服務器標識”或“VAPID”密鑰的 Web 憑據來授權向支持的 Web 推送服務發送請求。要訂閱您的應用以推送通知,您需要將一對密鑰與您的 Firebase 項目相關聯。您可以通過 Firebase 控制台生成新的密鑰對或導入現有的密鑰對。

生成新的密鑰對

  1. 打開雲端通訊的火力地堡控制台設置面板的選項卡,然後滾動到Web配置部分。
  2. Web推送證書選項卡上,單擊生成密鑰對。控制台顯示生成密鑰對的通知,並顯示公鑰字符串和添加日期。

導入現有的密鑰對

如果您現有的密鑰對已用於 Web 應用程序,則可以將其導入 FCM,以便您可以通過 FCM API 訪問現有的 Web 應用程序實例。要導入密鑰,您必須擁有對 Firebase 項目的所有者級訪問權限。以 base64 URL 安全編碼形式導入您現有的公鑰和私鑰:

  1. 打開雲端通訊的火力地堡控制台設置面板的選項卡,然後滾動到Web配置部分。
  2. Web推送證書選項卡,找到並選擇鏈接文本,“導入現有的密鑰對。”
  3. 導入密鑰對對話框中,提供在相應領域的公共和私有密鑰,然後單擊導入。控制台顯示公鑰字符串和添加日期。

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

檢索消息對象

網頁版 9

import { getMessaging } from "firebase/messaging";

const messaging = getMessaging();

網頁版 8

const messaging = firebase.messaging();

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

該方法getToken(): Promise<string>允許FCM到發送消息請求到不同的推送服務時所使用的關鍵VAPID憑證。使用您根據指令生成或進口的關鍵配置Web憑據與FCM ,加上它在你的代碼的消息對象檢索後:

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

訪問註冊令牌

當你需要獲取令牌為應用程序實例當前的註冊,撥打getToken 。如果未授予通知權限,此方法將要求用戶提供通知權限。否則,它會返回一個令牌或由於錯誤而拒絕承諾。

消息傳遞服務需要一個firebase-messaging-sw.js文件。除非你已經有一個firebase-messaging-sw.js文件,創建一個相同名稱的空文件並將其放置在您的域的根目錄獲取令牌之前。您可以稍後在客戶端設置過程中向文件添加有意義的內容。

要檢索當前令牌:

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

網頁版 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) 的幾個選項: