ServiceWorkerContainer

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.

TheServiceWorkerContainer interface of theService Worker API provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.

Most importantly, it exposes theServiceWorkerContainer.register() method used to register service workers, and theServiceWorkerContainer.controller property used to determine whether or not the current page is actively controlled.

ServiceWorkerContainer objects are exposed in the Window scope throughNavigator.serviceWorker and in workers usingWorkerNavigator.serviceWorker (if supported — checkbrowser compatibility).

Instance properties

ServiceWorkerContainer.controllerRead only: AServiceWorker object that represents the active service worker controlling the current page ornull if the page has no active or activating service worker.
ServiceWorkerContainer.readyRead only: Returns aPromise that resolves with theServiceWorkerRegistration associated with the current page, but only when there is an active service worker.This provides a mechanism to defer code execution until a service worker is active.

Instance methods

ServiceWorkerContainer.getRegistration(): Gets aServiceWorkerRegistration object whose scope matches the provided document URL. The method returns aPromise that resolves to aServiceWorkerRegistration orundefined.
ServiceWorkerContainer.getRegistrations(): Returns allServiceWorkerRegistration objects associated with aServiceWorkerContainer in an array. The method returns aPromise that resolves to an array ofServiceWorkerRegistration.
ServiceWorkerContainer.register(): Creates or updates aServiceWorkerRegistration for the givenscriptURL.
ServiceWorkerContainer.startMessages(): Explicitly starts the flow of messages being dispatched from a service worker to pages under its control (e.g., sent viaClient.postMessage()). This can be used to react to sent messages earlier, even before that page's content has finished loading.

Events

controllerchange: Fired when the document's associatedServiceWorkerRegistration acquires a newactive worker.
message: Fired when incoming messages are received by theServiceWorkerContainer object (e.g., via aMessagePort.postMessage() call).
messageerror: Fired when incoming messages can not deserialized by theServiceWorkerContainer object (e.g., via aMessagePort.postMessage() call).

Examples

The example below first checks to see if the browser supports service workers. If supported, the code registers the service worker and determines if the page is actively controlled by the service worker. If it isn't, it prompts the user to reload the page so the service worker can take control. The code also reports any registration failures.

if ("serviceWorker" in navigator) {  // Register a service worker hosted at the root of the  // site using the default scope.  navigator.serviceWorker    .register("/sw.js")    .then((registration) => {      console.log("Service worker registration succeeded:", registration);      // At this point, you can optionally do something      // with registration. See https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration    })    .catch((error) => {      console.error(`Service worker registration failed: ${error}`);    });  // Independent of the registration, let's also display  // information about whether the current page is controlled  // by an existing service worker, and when that  // controller changes.  // First, do a one-off check if there's currently a  // service worker in control.  if (navigator.serviceWorker.controller) {    console.log(      "This page is currently controlled by:",      navigator.serviceWorker.controller,    );  }  // Then, register a handler to detect when a new or  // updated service worker takes control.  navigator.serviceWorker.oncontrollerchange = () => {    console.log(      "This page is now controlled by",      navigator.serviceWorker.controller,    );  };} else {  console.log("Service workers are not supported.");}