Google is committed to advancing racial equity for Black communities. See how.
本頁面由 Cloud Translation API 翻譯而成。
Switch to English

設置JavaScript Firebase Cloud Messaging客戶端應用

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

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

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

將Firebase添加到您的JavaScript項目

如果尚未將Firebase添加到您的JavaScript項目中

如果您當前正在使用FCM for web,並且想升級到SDK 6.7.0或更高版本,則必須在Google Cloud Console中為您的項目啟用FCM Registration API 。啟用API後,請確保使用用於Firebase的相同Google帳戶登錄到Cloud Console,並確保選擇正確的項目。添加FCM SDK的新項目默認情況下啟用了此API。

使用FCM配置Web憑據

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

生成一個新的密鑰對

  1. 打開Firebase控制台“設置”窗格的“ 雲消息傳遞”選項卡,然後滾動到“ Web配置”部分。
  2. 在“ Web Push證書”選項卡中,單擊“ 生成密鑰對” 。控制台會顯示已生成密鑰對的通知,並顯示公共密鑰字符串和添加日期。

導入現有的密鑰對

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

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

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

檢索消息傳遞對象

// Retrieve Firebase Messaging object.
const messaging = firebase.messaging();

在您的應用中配置Web憑據

usePublicVapidKey方法允許FCM在向不同的推送服務發送消息請求時使用VAPID密鑰證書。使用根據使用FCM配置Web憑據中的指示生成或導入的密鑰,在檢索到消息傳遞對象之後,將其添加到代碼中:

 // Add the public key generated from the console here.
messaging.usePublicVapidKey("BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu");
 

訪問註冊令牌

本節介紹如何檢索應用程序實例的註冊令牌以及如何監視令牌刷新事件。由於令牌在初次啟動後可以旋轉,因此您應該監視令牌刷新,並始終獲取最新的更新註冊令牌。

在以下情況下,註冊令牌可能會更改:

  • Web應用程序將刪除註冊令牌。
  • 用戶清除瀏覽器數據。在這種情況下,調用getToken檢索新令牌。

檢索當前註冊令牌

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

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

要檢索當前令牌:

// Get Instance ID token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken().then((currentToken) => {
  if (currentToken) {
    sendTokenToServer(currentToken);
    updateUIForPushEnabled(currentToken);
  } else {
    // Show permission request.
    console.log('No Instance ID token available. Request permission to generate one.');
    // Show permission UI.
    updateUIForPushPermissionRequired();
    setTokenSentToServer(false);
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  showToken('Error retrieving Instance ID token. ', err);
  setTokenSentToServer(false);
});

監控令牌刷新

每當生成新令牌時都會觸發onTokenRefresh回調,因此在其上下文中調用getToken可確保您正在訪問當前可用的註冊令牌。

// Callback fired if Instance ID token is updated.
messaging.onTokenRefresh(() => {
  messaging.getToken().then((refreshedToken) => {
    console.log('Token refreshed.');
    // Indicate that the new Instance ID token has not yet been sent to the
    // app server.
    setTokenSentToServer(false);
    // Send Instance ID token to app server.
    sendTokenToServer(refreshedToken);
    // ...
  }).catch((err) => {
    console.log('Unable to retrieve refreshed token ', err);
    showToken('Unable to retrieve refreshed token ', err);
  });
});

獲取令牌後,將其發送到您的應用服務器並使用首選方法進行存儲。您可以使用實例ID服務器API 獲取有關訂閱的信息

下一步

完成設置步驟後,以下是一些用於FCM for Web(JavaScript)的選項: