The ServiceWorker
interface of the ServiceWorker API provides a reference to a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same service worker, each through a unique ServiceWorker
object.
A ServiceWorker
object is available in the ServiceWorkerRegistration.active
property, and the ServiceWorkerContainer.controller
property — this is a service worker that has been activated and is controlling the page (the service worker has been successfully registered, and the controlled page has been reloaded.)
The ServiceWorker
interface is dispatched a set of lifecycle events — install
and activate
— and functional events including fetch
. A ServiceWorker
object has an associated ServiceWorker.state
, related to its lifecycle.
Properties
The ServiceWorker
interface inherits properties from its parent, Worker
.
ServiceWorker.scriptURL
Read only- Returns the
ServiceWorker
serialized script URL defined as part ofServiceWorkerRegistration
. The URL must be on the same origin as the document that registers theServiceWorker
. ServiceWorker.state
Read only- Returns the state of the service worker. It returns one of the following values:
installing
,installed,
activating
,activated
, orredundant
.
Event handlers
ServiceWorker.onstatechange
Read only- An
EventListener
property called whenever an event of typestatechange
is fired; it is basically fired anytime theServiceWorker.state
changes.
Methods
The ServiceWorker
interface inherits methods from its parent, Worker
, with the exception of Worker.terminate
— this should not be accessible from service workers.
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.
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js', { scope: './' }).then(function (registration) { 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); }); } }).catch (function (error) { // Something went wrong during registration. The service-worker.js file // might be unavailable or contain a syntax error. }); } else { // The current browser doesn't support service workers. }
Specifications
Specification | Status | Comment |
---|---|---|
Service Workers The definition of 'ServiceWorker' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ServiceWorker | 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 |
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 |
scriptURL | 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 |
state | 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.