使用 Web 推送

在扩展程序中，您可以使用任何推送服务提供商来发送推送通知和消息。来自 Push API 的推送将在接收 Service Worker 后立即由 Service Worker 进行处理。如果 Service Worker 已暂停，推送操作会将其重新唤醒。在扩展程序中使用该 API 的过程与在开放 Web 上使用该 API 完全相同。

获取使用 Push API 的权限

当您在常规网站上注册推送服务器时，系统会提示用户批准或拒绝该服务器。使用此类扩展程序时，系统不会显示提示。如需在扩展程序中使用 Push API，您需要在 manifest.json 中设置 notifications 权限

  {
    "manifest_version": 3,
    ...
    "permissions": ["notifications"]

如果您缺少此权限，则与 registration.pushManager 的任何互动都会导致即时错误，结果与用户拒绝该权限的情况相同。此外，请注意，notifications 权限会导致在安装时显示权限警告。Chrome 还会针对任何现有安装停用该扩展程序，直到用户批准新权限请求。您可以参阅权限警告指南，详细了解如何处理此问题。

推送提供程序和推送服务

向 manifest.json 添加权限后，您需要配置后端与扩展程序之间的连接。此连接可分为两部分：推送提供程序和推送服务。提供程序是您用于将消息发送到推送服务的 SDK。有许多不同的选项，并且任何推送提供程序都可以支持 Push API（尽管它们可能不会提供便于集成的 SDK）。您需要使用提供商的 SDK 进行实验，以了解可实现的功能。最终用户的设备已注册到推送服务，因此可以收到推送提供方发送的任何推送消息提醒。这项功能已硬编码到各个浏览器中，因此您无法控制。对于 Chrome，Firebase Cloud Messaging 是推送服务。系统会通过该端口将推送给 Chrome 用户的所有消息进行路由。

自行托管推送服务提供商

任何推送提供程序都可以运行，但并非所有提供程序都提供在 Service Worker 中运行的 SDK。如果您在运行该服务时遇到问题，则需要咨询您的提供商。不过，您无需使用公共提供商。您可以使用 web-push 等库托管自己的后端。

您可以使用 web-push-codelab.glitch.me 测试此库。具体而言，您需要复制推送服务器的 VAPID 公钥，才能在浏览器中生成推送订阅。该公钥实际上是一个 base64 编码的二进制值，需要对其进行解码并转换为 Uint8Array，然后才能向浏览器的推送管理器注册。有一些库可用于执行此逻辑，但只需执行以下操作即可。

function urlB64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');

  const rawData = atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

所提供的值会传递给推送管理器

const SERVER_PUBLIC_KEY = '_INSERT_VALUE_HERE_';
const applicationServerKey = urlB64ToUint8Array(SERVER_PUBLIC_KEY);

async function subscribe() {
  try {
    let subscription = await self.registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    });

    console.log(`Subscribed: ${JSON.stringify(subscription,0,2)}`);

    return subscription
  } catch (error) {
    console.error('Subscribe error: ', error);
  }
}

const subscription = await subscribe();

subscribe 函数会返回 PushSubscription，这是一个包含推送服务器元数据的对象。由于您使用的是 web-push-codelab.glitch.me，因此需要将此值复制到该网页的“Push 订阅”部分。

拥有 PushSubscription 后，您就可以在我们的扩展程序的 Service Worker 中注册推送消息的监听器了。

self.addEventListener('push', function (event) {
  console.log(`Push had this data/text: "${event.data.text()}"`);
});

监听器就绪后，您可以在 web-push-codelab.glitch.me 上提交消息，系统会将消息记录到服务工作器的控制台中。

由于 Web Push 是一种开放式 Web 标准，因此目前有许多关于如何实现 Web Push 的文档，包括 Chrome 博客上的文档。如需查看此处介绍的示例的完整版本，请访问我们的扩展程序示例代码库。

静默推送

自 Chrome 88 中引入 Manifest v3 以来，您已能够在 Manifest v3 扩展程序中接收推送通知。不过，一直以来都有要求通知显示某种可供用户看到的提示，例如网络通知。如果您想向扩展程序推送命令或数据更新，但又不想向用户显示不必要的信息，则此方法的用处会大打折扣。从 Chrome 121 开始，扩展程序能够将 userVisibleOnly 设置为 false。现在，您可以向用户发送静默的非用户专用推送通知。如需使用此功能，请在调用 pushManager.subscribe 时将 userVisibleOnly 设置为 false。

let subscription = await self.registration.pushManager.subscribe({
  userVisibleOnly: false,
  applicationServerKey
});