ServiceWorker

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨April 2018⁩.

* Some parts of this feature may have varying levels of support.

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

Note: This feature is available inWeb Workers.

TheServiceWorker interface of theService Worker API provides a reference to a service worker. Multiplebrowsing contexts (e.g., pages, workers, etc.) can be associated with the same service worker, each through a uniqueServiceWorker object.

AServiceWorker object is available via a number of properties:

ServiceWorkerRegistration.active
ServiceWorkerGlobalScope.serviceWorker
ServiceWorkerContainer.controller — when the service worker is inactivating oractivated state
ServiceWorkerRegistration.installing — when the service worker is ininstalling state
ServiceWorkerRegistration.waiting — when the service worker is ininstalled state

TheServiceWorker.state property andstatechange event can be used to check and observe changes in the lifecycle-state of the object's associated service worker.Related lifecycle events, such asinstall andactivate are fired at the service worker itself.

Service workers allow static import ofECMAScript modules, if supported, usingimport.Dynamic import is disallowed by the specification — callingimport() will throw.

Service workers can only be registered in the Window scope in some or all browsers, because theServiceWorker object is not exposed toDedicatedWorkerGlobalScope andSharedWorkerGlobalScope.Check thebrowser compatibility for information.

Instance properties

TheServiceWorker interface inherits properties from its parent,EventTarget.

ServiceWorker.scriptURLRead only: Returns theServiceWorker serialized script URL defined as part ofServiceWorkerRegistration. The URL must be on the same origin as the document that registers theServiceWorker.
ServiceWorker.stateRead only: Returns the state of the service worker. It returns one of the following values:parsed,installing,installed,activating,activated, orredundant.

Instance methods

TheServiceWorker interface inherits methods from its parent,EventTarget.

ServiceWorker.postMessage(): Sends a message — consisting of anystructured-cloneable JavaScript object — to the service worker. The message is transmitted to the service worker using amessage event on its global scope.

Events

statechange: Fired whenServiceWorker.state changes.
error: Fired when an error happens inside theServiceWorker object.

Examples

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

if ("serviceWorker" in navigator) {  navigator.serviceWorker    .register("service-worker.js", {      scope: "./",    })    .then((registration) => {      let 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", (e) => {          // logState(e.target.state);        });      }    })    .catch((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.  // Perhaps it is too old or we are not in a Secure Context.}