Web/API/ServiceWorkerGlobalScope/pushsubscriptionchange event
The pushsubscriptionchange
event is sent to the global scope of a ServiceWorker
to indicate a change in push subscription that was triggered outside the application's control. This may occur if the subscription was refreshed by the browser, but it may also happen if the subscription has been revoked or lost.
Bubbles | No |
Cancelable | No |
Interface | PushSubscriptionChangeEvent
|
Event handler property | onpushsubscriptionchange
|
Usage notes
Although examples demonstrating how to share subscription related information with the application server tend to use fetch()
, this is not necessarily the best choice for real-world use, since it will not work if the app is offline, for example.
Consider using another method to synchronize subscription information between your service worker and the app server, or make sure your code using fetch()
is robust enough to handle cases where attempts to exchange data fail.
Note: In earlier drafts of the specification, this event was defined to be sent when a PushSubscription
has expired.
Examples
This example, run in the context of a service worker, listens for a pushsubscriptionchange
event and re-subscribes to the lapsed subscription.
self.addEventListener("pushsubscriptionchange", event => {
event.waitUntil(swRegistration.pushManager.subscribe(event.oldSubscription.options)
.then(subscription => {
return fetch("register", {
method: "post",
headers: {
"Content-type": "application/json"
},
body: JSON.stringify({
endpoint: subscription.endpoint
})
});
})
);
}, false);
When a pushsubscriptionchange
event arrives, indicating that the subscription has expired, we resubscribe by calling the push manager's subscribe()
method. When the returned promise is resolved, we receive the new subscription. This is delivered to the app server using a fetch()
call to post a JSON formatted rendition of the subscription's endpoint
to the app server.
You can also use the onpushsubscriptionchange
event handler property to set up the event handler:
self.onpushsubscriptionchange = event => {
event.waitUntil(swRegistration.pushManager.subscribe(event.oldSubscription.options)
.then(subscription => {
/* ... */
)
};
Specifications
Specification | Status | Comment |
---|---|---|
Push APIThe definition of 'pushsubscriptionchange' in that specification. | Working Draft | Initial specification. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
pushsubscriptionchange event
|
Chrome
Full support 40 |
Edge
Full support ≤79 |
Firefox Full support 44 Full support 44 Notes' Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API. |
IE
No support No |
Opera
Full support 24 |
Safari
Full support 11.1 |
WebView Android
Full support 40 |
Chrome Android
Full support 40 |
Firefox Android
Full support 44 |
Opera Android
Full support 24 |
Safari iOS
Full support 11.3 |
Samsung Internet Android
Full support 4.0 |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.'
- See implementation notes.
See also
- Using the Push API
onpushsubscriptionchange
event handler property
ServiceWorkerGlobalScope: pushsubscriptionchange event by Mozilla Contributors is licensed under CC-BY-SA 2.5.