本頁面由 Cloud Translation API 翻譯而成。

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

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

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

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

添加並初始化 FCM SDK

如果您還沒有安裝 Firebase JS SDK 並初始化 Firebase 。
添加 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();

如果您當前正在使用 Web 版 FCM 並希望升級到 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 控制台導入現有的密鑰對。

生成新的密鑰對

打開 Firebase 控制台設置窗格的雲消息傳遞選項卡並滾動到Web 配置部分。
在Web Push certificates選項卡中，單擊Generate Key Pair 。控制台顯示生成密鑰對的通知，並顯示公鑰字符串和添加日期。

導入現有密鑰對

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

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

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

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

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

import { getMessaging, getToken } from "firebase/messaging";

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

訪問註冊令牌

當您需要檢索應用程序實例的當前註冊令牌時，首先使用Notification.requestPermission()向用戶請求通知權限。如圖所示調用時，如果授予權限，則返回令牌，如果拒絕，則拒絕承諾：

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');

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

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

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

下一步

完成設置步驟後，您可以通過以下幾個選項繼續使用 FCM for Web (JavaScript)：

向您的應用程序添加接收消息的功能。
試試我們的教程之一：將您的第一條消息發送到後台應用程序或將消息發送到多個設備。
查看GitHub 上的完整示例。
查看JavaScript 參考。
查看實施 API 的視頻演練。