This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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 activated and 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. |
Editor's Draft | Initial definition. |
Browser compatibility
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 | Edge | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|---|
Basic support | No support | No support | (Yes) | 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.