ServiceWorkerGlobalScope: pushsubscriptionchange 事件
注意：此功能仅在 Service Workers 中可用。
pushsubscriptionchange 事件会发送到 全局作用域 的 ServiceWorker，以指示由应用程序外部控制的推送订阅发生更改。
当浏览器刷新订阅时可能会发生这种情况，但也可能在订阅已被吊销或丢失时发生。
此事件不可取消，也不会冒泡。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("pushsubscriptionchange", (event) => { })
onpushsubscriptionchange = (event) => { }
事件类型
一个通用的 Event。
用法说明
虽然演示如何与应用程序服务器共享订阅相关信息的示例倾向于使用 fetch()，但这不一定是实际使用的最佳选择，因为它在应用程序离线时将不起作用。
请考虑使用其他方法在您的 service worker 和应用程序服务器之间同步订阅信息，或者确保您使用 fetch() 的代码足够健壮，能够处理数据交换尝试失败的情况。
注意： 在规范的早期草案中，此事件定义为在 PushSubscription 过期时发送。
示例
此示例在 service worker 上下文中运行，它会监听 pushsubscriptionchange 事件并重新订阅已失效的订阅。
js
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);
});
当 pushsubscriptionchange 事件到达时，表示订阅已过期，我们通过调用 push 管理器的 subscribe() 方法来重新订阅。当返回的 Promise 解决时，我们会收到新的订阅。这会通过 fetch() 调用发送到应用程序服务器，将订阅的 endpoint 的 JSON 格式表示发送到应用程序服务器。
您还可以使用 onpushsubscriptionchange 事件处理程序属性来设置事件处理程序
js
self.onpushsubscriptionchange = (event) => {
event.waitUntil(
self.registration.pushManager
.subscribe(event.oldSubscription.options)
.then((subscription) => {
/* ... */
}),
);
};
规范
| 规范 |
|---|
| 推送 API # the-pushsubscriptionchange-event |
| 推送 API # dom-serviceworkerglobalscope-onpushsubscriptionchange |
浏览器兼容性
加载中…