获取我们在 Firebase 峰会上发布的所有信息,了解 Firebase 可如何帮助您加快应用开发速度并满怀信心地运行应用。了解详情

设置 JavaScript Firebase 云消息传递客户端应用

FCM JavaScript API 允许您在支持Push API的浏览器中运行的 Web 应用程序中接收通知消息。这包括此支持矩阵中列出的浏览器版本和通过 Push API 进行的 Chrome 扩展。

FCM SDK 仅在通过 HTTPS 提供的页面中受支持。这是由于它使用了仅在 HTTPS 站点上可用的服务工作者。如果您需要提供商,建议使用Firebase 托管,并为您自己的域上的 HTTPS 托管提供免费层级。

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

添加并初始化 FCM SDK

  1. 如果您还没有,请安装 Firebase JS SDK 并初始化 Firebase

  2. 添加 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();

如果您当前使用 FCM 网页版并希望升级到 SDK 6.7.0 或更高版本,则必须在 Google Cloud Console 中为您的项目启用FCM 注册 API 。当您启用 API 时,请确保您使用与 Firebase 相同的 Google 帐户登录到 Cloud Console,并确保选择正确的项目。添加 FCM SDK 的新项目默认启用此 API。

使用 FCM 配置 Web 凭据

FCM Web 界面使用称为“自愿应用程序服务器标识”或“VAPID”密钥的 Web 凭证来授权向支持的 Web 推送服务发送请求。要为您的应用订阅推送通知,您需要将一对密钥与您的 Firebase 项目相关联。您可以生成新的密钥对或通过 Firebase 控制台导入现有的密钥对。

生成新的密钥对

  1. 打开 Firebase 控制台设置窗格的云消息传递选项卡并滚动到Web 配置部分。
  2. Web 推送证书选项卡中,单击生成密钥对。控制台显示密钥对已生成的通知,并显示公钥字符串和添加日期。

导入现有密钥对

如果您有一个已与您的 Web 应用程序一起使用的现有密钥对,您可以将其导入 FCM,以便您可以通过 FCM API 访问您现有的 Web 应用程序实例。要导入密钥,您必须拥有 Firebase 项目的所有者级访问权限。以 base64 URL 安全编码形式导入您现有的公钥和私钥:

  1. 打开 Firebase 控制台设置窗格的云消息传递选项卡并滚动到Web 配置部分。
  2. Web 推送证书选项卡中,找到并选择链接文本“导入现有密钥对”。
  3. Import a key pair对话框中,在相应字段中提供您的公钥和私钥,然后单击Import 。控制台显示公钥字符串和添加日期。

有关如何将密钥添加到您的应用程序的说明,请参阅在您的应用程序中配置 Web 凭据。有关密钥格式以及如何生成它们的更多信息,请参阅应用程序服务器密钥

在您的应用程序中配置 Web 凭据

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

// Add the public key generated from the console here.
messaging.getToken({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);
  // ...
});

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

获取令牌后,将其发送到您的应用服务器并使用您喜欢的方法存储它。

下一步

完成设置步骤后,这里有几个选项可用于继续使用 FCM for Web (JavaScript):