设置 Firebase Cloud Messaging 客户端应用 (JavaScript)

借助 FCM JavaScript API，您可以在支持 Push API 的浏览器上运行的 Web 应用中接收通知消息。这包括此支持矩阵中列出的浏览器版本及兼容 Push API 的 Chrome 扩展程序。

只有通过 HTTPS 传送的页面才支持 FCM SDK。这是由于该 SDK 使用 Service Worker，而 Service Worker 只能在 HTTPS 网站上使用。如果您需要一个提供商，我们建议您使用 Firebase Hosting 的免费层级，在您自己的网域中免费托管 HTTPS 网站。

如需开始使用 FCM JavaScript API，您需要将 Firebase 添加到您的 Web 应用，并添加逻辑以访问注册令牌。

添加并初始化 FCM SDK

  1. 如果您尚未安装 Firebase JS SDK 并初始化 Firebase，请先安装并进行初始化。

  2. 添加 Firebase Cloud Messaging JS SDK 并初始化 Firebase Cloud Messaging：

WebWeb

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);


import firebase from "firebase/compat/app";
import "firebase/compat/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 控制台中为您的项目启用 FCM Registration API。启用 API 时，请务必使用您用于 Firebase 的同一 Google 账号登录到 Cloud 控制台，并且务必选择正确的项目。默认情况下，添加 FCM SDK 的新项目会启用此 API。

为 FCM 配置 Web 凭据

FCM 网页界面使用名为“自主应用服务器标识”（即“VAPID”密钥）的 Web 凭据来授权向支持的 Web 推送服务发送请求。如需为应用订阅推送通知，您需要将一对密钥与您的 Firebase 项目相关联。您可以生成新的密钥对，也可以通过 Firebase 控制台导入现有的密钥对。

生成新的密钥对

  1. 打开 Firebase 控制台设置窗格中的 Cloud Messaging 标签页，然后滚动至 Web 配置部分。
  2. 在 Web 推送证书标签页中，点击生成密钥对。控制台会显示一则通知，说明已生成密钥对，并且会显示公钥字符串和添加日期。

导入现有的密钥对

如果您有已在 Web 应用中使用的现有密钥对，可以将其导入 FCM 中，以便通过 FCM API 访问现有的 Web 应用实例。如需导入密钥，您必须拥有对 Firebase 项目的所有者级访问权限。以 base64 URL 安全编码形式导入现有的公钥和私钥：

  1. 打开 Firebase 控制台设置窗格中的 Cloud Messaging 标签页，然后滚动至 Web 配置部分。
  2. 在 Web 推送证书标签页中，找到并选择链接文本“导入现有的密钥对”(import an existing key pair)。
  3. 在导入一个密钥对对话框的相应字段中提供公钥和私钥，然后点击导入。控制台会显示公钥字符串和添加日期。

如需了解如何将密钥添加到应用，请参阅在应用中配置 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() 向用户请求通知权限。按如下所示进行调用时，如果已授予权限，此函数会返回令牌；或者，如果已拒绝权限，此函数会拒绝 promise：

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 文件，否则请创建一个使用该名称的空文件，并在检索令牌之前将该文件放在您网域的根目录中。您可以在后面的客户端设置流程中向该文件添加有意义的内容。

如需检索当前令牌，请参考以下代码：

WebWeb
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
 
// 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

获取令牌后，将其发送到您的应用服务器，并使用您首选的方法进行存储。

后续步骤

完成设置步骤后，您可以通过以下几个选项继续了解 Web 版 FCM (JavaScript)：