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 |
瀏覽器相容性
載入中…