ServiceWorkerGlobalScope: pushsubscriptionchange 事件

安全上下文： 此功能仅在安全上下文（HTTPS）中可用，在部分或所有支持的浏览器中可用。

注意： 此功能仅在 Service Workers 中可用。

pushsubscriptionchange 事件发送到全局作用域的 ServiceWorker，以指示推送订阅发生变更，该变更是在应用程序控制范围之外触发的。

这种情况可能发生在订阅由浏览器刷新时，但也可能发生在订阅被撤销或丢失时。

此事件不可取消，也不冒泡。

语法

在诸如 addEventListener() 的方法中使用事件名称，或设置事件处理程序属性。

addEventListener("pushsubscriptionchange", (event) => {});

onpushsubscriptionchange = (event) => {};

事件类型

一个通用的 Event。

使用说明

虽然演示如何与应用程序服务器共享订阅相关信息的示例倾向于使用 fetch()，但这并非真正应用中的最佳选择，因为它在应用程序脱机时无法正常工作。

考虑使用其他方法同步服务工作者和应用程序服务器之间的订阅信息，或确保使用 fetch() 的代码足够健壮，能够处理数据交换尝试失败的情况。

注意： 在规范的早期草案中，此事件被定义为在 PushSubscription 过期时发送。

示例

此示例在服务工作者的上下文中运行，监听 pushsubscriptionchange 事件，并重新订阅已过期的订阅。

self.addEventListener(
  "pushsubscriptionchange",
  (event) => {
    const conv = (val) =>
      self.btoa(String.fromCharCode.apply(null, new Uint8Array(val)));
    const getPayload = (subscription) => ({
      endpoint: subscription.endpoint,
      publicKey: conv(subscription.getKey("p256dh")),
      authToken: conv(subscription.getKey("auth")),
    });

    const subscription = self.registration.pushManager
      .subscribe(event.oldSubscription.options)
      .then((subscription) =>
        fetch("register", {
          method: "post",
          headers: {
            "Content-type": "application/json",
          },
          body: JSON.stringify({
            old: getPayload(event.oldSubscription),
            new: getPayload(subscription),
          }),
        }),
      );
    event.waitUntil(subscription);
  },
  false,
);

当收到 pushsubscriptionchange 事件，表明订阅已过期时，我们通过调用推送管理器的方法 subscribe() 来重新订阅。当返回的 Promise 解决时，我们将收到新订阅。这将使用 fetch() 调用发送到应用程序服务器，以将订阅的 endpoint 的 JSON 格式呈现发送到应用程序服务器。

您还可以使用 onpushsubscriptionchange 事件处理程序属性来设置事件处理程序

self.onpushsubscriptionchange = (event) => {
  event.waitUntil(
    self.registration.pushManager
      .subscribe(event.oldSubscription.options)
      .then((subscription) => {
        /* ... */
      }),
  );
};

规范

规范
推送 API # the-pushsubscriptionchange-event
推送 API # dom-serviceworkerglobalscope-onpushsubscriptionchange

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

使用推送 API