ExtendableEvent

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⁩.

Note: This feature is only available inService Workers.

TheExtendableEvent interface extends the lifetime of theinstall andactivate events dispatched on the global scope as part of the service worker lifecycle. This ensures that any functional events (likeFetchEvent) are not dispatched until it upgrades database schemas and deletes the outdated cache entries.

IfwaitUntil() is called outside of theExtendableEvent handler, the browser should throw anInvalidStateError; note also that multiple calls will stack up, and the resulting promises will be added to the list ofextend lifetime promises.

This interface inherits from theEvent interface.

Note:This interface is only available when the global scope is aServiceWorkerGlobalScope. It is not available when it is aWindow, or the scope of another kind of worker.

Constructor

ExtendableEvent(): Creates a newExtendableEvent object.

Instance properties

Doesn't implement any specific properties, but inherits properties from its parent,Event.

Instance methods

Inherits methods from its parent,Event.

ExtendableEvent.waitUntil(): Extends the lifetime of the event. It is intended to be called in theinstallevent handler for theinstalling worker and on theactivateevent handler for theactive worker.

Examples

This code snippet is from theservice worker prefetch sample (seeprefetch example live.) The code callsExtendableEvent.waitUntil() inoninstall, delaying treating theServiceWorkerRegistration.installing worker as installed until the passed promise resolves successfully. The promise resolves when all resources have been fetched and cached, or else when any exception occurs.

The code snippet also shows a best practice for versioning caches used by the service worker. Though there's only one cache in this example, the same approach can be used for multiple caches. It maps a shorthand identifier for a cache to a specific, versioned cache name.

Note:In Chrome, logging statements are visible via the "Inspect" interface for the relevant service worker accessed via chrome://serviceworker-internals.

const CACHE_VERSION = 1;const CURRENT_CACHES = {  prefetch: `prefetch-cache-v${CACHE_VERSION}`,};self.addEventListener("install", (event) => {  const urlsToPrefetch = [    "./static/pre_fetched.txt",    "./static/pre_fetched.html",    "https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif",  ];  console.log(    "Handling install event. Resources to pre-fetch:",    urlsToPrefetch,  );  event.waitUntil(    caches      .open(CURRENT_CACHES["prefetch"])      .then((cache) =>        cache.addAll(          urlsToPrefetch.map(            (urlToPrefetch) => new Request(urlToPrefetch, { mode: "no-cors" }),          ),        ),      )      .then(() => {        console.log("All resources have been fetched and cached.");      })      .catch((error) => {        console.error("Pre-fetching failed:", error);      }),  );});

Note:When fetching resources, it's very important to use{mode: 'no-cors'} if there is any chance that the resources are served off of a server that doesn't supportCORS. In this example,www.chromium.org doesn't support CORS.