Google 致力于为黑人社区推动种族平等。查看具体举措

设置 JavaScript Firebase Cloud Messaging 客户端应用

借助 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 应用,并添加逻辑以访问注册令牌。

将 Firebase 添加到您的 JavaScript 项目

如果您尚未将 Firebase 添加到您的 JavaScript 项目,请先添加。

如果您目前使用的是 Web 版 FCM,并希望升级到 SDK 6.7.0 或更高版本,则必须在 Google Cloud Console 中为您的项目启用 FCM Registration API。启用 API 时,请务必使用您用于 Firebase 的同一 Google 帐号登录到 Cloud Console,并且务必选择正确的项目。默认情况下,添加 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 版本 9

import { getMessaging } from "firebase/messaging";

const messaging = getMessaging();

Web 版本 8

const messaging = firebase.messaging();

在应用中配置 Web 凭据

getToken(): Promise<string> 方法允许 FCM 在向不同的推送服务发送消息请求时使用 VAPID 密钥凭据。使用根据上文的为 FCM 配置 Web 凭据中的说明生成或导入的密钥,在检索到消息传递对象后将其添加到代码中:

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

获取注册令牌

如果需要检索应用实例的当前注册令牌,请调用 getToken。如果未授予通知权限,此方法将向用户请求通知权限。在其他情况下,它会返回一个令牌,或由于出现错误而拒绝该 Promise。

消息传递服务需要一个 firebase-messaging-sw.js 文件。除非您已经有 firebase-messaging-sw.js 文件,否则请创建一个使用该名称的空文件,并在检索令牌之前将该文件放在您网域的根目录中。您可以在后面的客户端设置流程中向该文件添加有意义的内容。

如需检索当前令牌,请参考以下代码:

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

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

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

后续步骤

完成设置步骤后,您可以通过以下几个选项继续了解适用于 Web (JavaScript) 的 FCM: