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.
ServiceWorker.onstatechange = function(statechangeevent) { ... } ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )
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. } })
Specification | Status | Comment |
---|---|---|
Service Workers The definition of 'ServiceWorker.onstatechange' in that specification. | Editor's Draft | Initial definition |
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 40.0 | (Yes)[2] | 44.0 (44.0)[1] | No support | 24 | No support |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | No support | No support | 44.0 (44.0) | (Yes) | No support | ? | No support | 40.0 |
[1] Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)
[2] Service workers is available in Microsoft Edge starting EdgeHTML 16 behind a flag.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker/onstatechange