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憑據。有關密鑰格式以及如何生成密鑰的更多信息,請參閱《 應用程序服務器密鑰》

檢索消息傳遞對象

Web v8

const messaging = firebase.messaging();

Web 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文件,否則在檢索令牌之前,請使用該名稱創建一個空文件並將其放置在您域的根目錄中。您可以稍後在客戶端設置過程中向文件添加有意義的內容。

要檢索當前令牌:

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

Web 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)的選項: