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
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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
onstatechange | Chrome Full support 40 | Edge
Full support
17
| Firefox
Full support
44
| IE No support No | Opera Full support 27 | Safari Full support 11.1 | WebView Android Full support 40 | Chrome Android Full support 40 | Firefox Android Full support 44 | Opera Android Full support 27 | Safari iOS Full support 11.3 | Samsung Internet Android Full support 4.0 |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.