此页面由 Cloud Translation API 翻译。

使用 Web 推送

在扩展程序中，您可以使用任何推送提供程序发送推送通知和消息。来自 Push API 的推送将作为并在收到请求后立即处理如果 Service Worker 已被挂起，则 Push 将再唤醒它。在扩展程序中使用它的流程与可以在开放网络中使用

获取使用 Push API 的权限

在普通网站上注册推送服务器时，用户会看到一个授予或拒绝它的权限提示。如果使用扩展程序，。要在您的扩展程序中使用 Push API，您需要将 manifest.json 中的 notifications 权限

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

如果您缺少此权限，那么与 registration.pushManager 将导致立即发生错误，结果与如果用户拒绝了该权限，则会发生此错误。另请注意， notifications 权限将导致权限警告在安装时显示Chrome 还会停用现有安装，直到用户批准新权限请求。您可以请参阅权限警告指南。

推送提供程序和推送服务

将权限添加到 manifest.json 后，您需要配置后端与扩展程序之间的连接。此连接可以分为两部分：推送提供程序和推送服务。答 provider 是您用来向推送服务发送消息的 SDK。有许多不同的选项，任何推送提供程序都可以用于推送 API（尽管它们可能不会提供可以轻松集成的 SDK）。您需要对您的提供商的 SDK 进行实验，看看能否实现。推服务是最终用户设备注册时使用的服务，因此系统可以发送到推送提供程序发送的任何推送消息。您并不需要因为它已硬编码到各个浏览器中。对于 Chrome，Firebase Cloud Messaging 是一项推送服务。推送到 Chrome 的任何消息用户将通过它进行路由

自行托管推送提供商

任何推送提供程序都可以运行，但并非所有提供程序都提供有效的 SDK Service Worker 中的资源。如果您遇到问题，需要咨询您的提供商确保它正常运行不过，您无需使用公共提供商。使用 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，则需要将此值复制到页面的“推送订阅”部分

有了 PushSubscription 后，您就可以为在我们的扩展程序的 Service Worker 中推送消息。

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

安装好监听器后，您就可以通过 web-push-codelab.glitch.me，然后系统就会将消息记录到 Service Worker 的控制台。

由于它是一种开放式网络标准，如何实现网络推送，包括在 Chrome 博客上。对于该示例的完整版本，扩展程序示例代码库。

静默推送

您过去可以在 Manifest V3 扩展程序中收到推送通知从 Chrome 88 中引入 Manifest V3。不过，过去一直有要求通知显示某种用户可见提示，（如网络通知）。这就会大幅降低希望将命令或数据更新推送到您的扩展程序，而不费心提供不必要的信息自 Chrome 121 起，扩展程序能够将 userVisibleOnly 设为 false。您现在可以发送不向用户显示的静默推送通知。要使用这项功能在调用 pushManager.subscribe 时，将 userVisibleOnly 设置为 false。

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