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

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

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

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

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

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

添加并初始化 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();

如果您当前正在使用 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 控制台导入现有的密钥对。

生成新的密钥对

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

导入现有密钥对

如果您有一个已用于 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 凭据中的说明生成或导入的密钥,在检索消息传递对象后将其添加到您的代码中:

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

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