ServiceWorkerGlobalScope: pushsubscriptionchange-Ereignis
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Hinweis: Diese Funktion ist nur in Service Workers verfügbar.
Das pushsubscriptionchange-Ereignis wird an den globalen Gültigkeitsbereich eines ServiceWorker gesendet, um anzuzeigen, dass sich eine Push-Subscription außerhalb der Kontrolle der Anwendung geändert hat.
Dies kann geschehen, wenn der Browser die Subscription erneuert. Es kann aber auch vorkommen, wenn die Subscription widerrufen wurde oder verloren gegangen ist.
Dieses Ereignis kann nicht abgebrochen werden und wird nicht weitergereicht.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("pushsubscriptionchange", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onpushsubscriptionchange = (event) => { }
Ereignistyp
Ein generisches Event.
Hinweise zur Verwendung
Beispiele dafür, wie Informationen zu einer Subscription an den Anwendungsserver übermittelt werden können, verwenden häufig fetch(). Für den praktischen Einsatz ist dies jedoch nicht unbedingt die beste Wahl, da es beispielsweise nicht funktioniert, wenn die Anwendung offline ist.
Erwägen Sie eine andere Methode, um Subscription-Informationen zwischen Ihrem Service Worker und dem Anwendungsserver zu synchronisieren, oder stellen Sie sicher, dass Ihr Code mit fetch() robust genug ist, um fehlgeschlagene Versuche der Datenübertragung zu behandeln.
Hinweis:
In früheren Entwürfen der Spezifikation war festgelegt, dass dieses Ereignis gesendet wird, wenn eine PushSubscription abgelaufen ist.
Beispiele
Dieses Beispiel wird im Kontext eines Service Workers ausgeführt. Es wartet auf ein pushsubscriptionchange-Ereignis und erneuert die abgelaufene Subscription.
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);
});
Wenn ein pushsubscriptionchange-Ereignis eintrifft und damit anzeigt, dass die Subscription abgelaufen ist, wird durch Aufruf der Methode subscribe() des Push Managers eine neue Subscription angelegt. Sobald das zurückgegebene Promise erfüllt ist, erhalten wir die neue Subscription. Sie wird mit einem fetch()-Aufruf an den Anwendungsserver übermittelt, der eine als JSON formatierte Darstellung des endpoint der Subscription sendet.
Sie können auch die Event-Handler-Eigenschaft onpushsubscriptionchange verwenden, um den Event-Handler einzurichten. Beachten Sie jedoch, dass dadurch gegebenenfalls andere Event-Handler ersetzt werden, die über onpushsubscriptionchange hinzugefügt wurden:
self.onpushsubscriptionchange = (event) => {
event.waitUntil(
self.registration.pushManager
.subscribe(event.oldSubscription.options)
.then((subscription) => {
/* ... */
}),
);
};
Spezifikationen
| Spezifikation |
|---|
| Push API # the-pushsubscriptionchange-event |
| Push API # dom-serviceworkerglobalscope-onpushsubscriptionchange |