Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. Learn more

設置 JavaScript Firebase Cloud Messaging 客戶端應用

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

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

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

將 Firebase 添加到您的 JavaScript 項目

如果您還沒有,請將 Firebase 添加到您的 JavaScript 項目中

如果您當前正在使用 FCM for web 並希望升級到 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 Push 證書選項卡中,單擊Generate Key Pair 。控制台顯示生成密鑰對的通知,並顯示公鑰字符串和添加日期。

導入現有的密鑰對

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

  1. 打開 Firebase 控制台設置窗格的雲消息傳遞選項卡,然後滾動到Web 配置部分。
  2. Web Push 證書選項卡中,找到並選擇鏈接文本“導入現有密鑰對”。
  3. 導入密鑰對對話框中,在相應字段中提供您的公鑰和私鑰,然後單擊導入。控制台顯示公鑰字符串和添加日期。

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

檢索消息對象

網頁版 v8

const messaging = firebase.messaging();

網頁版 v9

import { getMessaging } from "firebase/messaging";

const messaging = getMessaging();

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

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

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

訪問註冊令牌

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

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

要檢索當前令牌:

網頁版 v8

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

網頁版 v9

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

獲得令牌後,將其發送到您的應用服務器並使用您喜歡的方法進行存儲。

下一步

完成設置步驟後,以下是使用 FCM for Web (JavaScript) 的幾個選項: