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 rendtion of the subscription's endpoint to the app server.

You can also use the onpushsubscriptionchyange 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 API
The definition of 'pushsubscriptionchange' in that specification.
Working Draft Initial specification.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
pushsubscriptionchange eventChrome Full support 40Edge ? Firefox Full support 44
Notes
Full support 44
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR).
IE No support NoOpera Full support 24Safari Full support 11.1WebView Android Full support 40Chrome Android Full support 40Edge Mobile ? Firefox Android Full support 44Opera Android Full support 24Safari iOS Full support 11.1Samsung Internet Android Full support 4.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

See also