MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

ServiceWorker.onstatechange

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

An EventListener property called whenever an event of type statechange is fired; it is basically fired anytime the ServiceWorker.state changes.

Syntax

ServiceWorker.onstatechange = function(statechangeevent) { ... }
ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )

Examples

This code snippet is from the service worker registration-events sample (live demo). The code listens for any change in the ServiceWorker.state and returns its value.

var serviceWorker;
if (registration.installing) {
  serviceWorker = registration.installing;
  document.querySelector('#kind').textContent = 'installing';
} else if (registration.waiting) {
  serviceWorker = registration.waiting;
  document.querySelector('#kind').textContent = 'waiting';
} else if (registration.active) {
  serviceWorker = registration.active;
  document.querySelector('#kind').textContent = 'active';
}

if (serviceWorker) {
  logState(serviceWorker.state);
  serviceWorker.addEventListener('statechange', function(e) {
  logState(e.target.state);
  });
}

Note that when statechange fires, the service worker's references may have changed. For example:

navigator.serviceWorker.register(..).then(function(swr) {
  swr.installing.state == "installing"
  swr.installing.onstatechange = function() {
    swr.installing == null;
    // At this point, swr.waiting OR swr.active might be true. This is because the statechange
    // event gets queued, meanwhile the underlying worker may have gone into the waiting
    // state and will be immediately activated if possible.
  }
})

Specifications

Specification Status Comment
Service Workers
The definition of 'ServiceWorker.onstatechange' in that specification.
Working Draft Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support40

161

17

442 No27 No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support4040 No4427 No4.0

1. From version 16: this feature is behind the Enable service workers preference.

2. Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)

Document Tags and Contributors

 Contributors to this page: fscholz, abbycar, chrisdavidmills, Sebastianz, jpmedley, kscarfone
 Last updated by: fscholz,