InstallEvent

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The parameter passed into an install event handler function, the InstallEvent interface represents an install action that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker. As a child of ExtendableEvent, it ensures that functional events such as FetchEvent are not dispatched during installation.

This interface inherits from the ExtendableEvent interface.

Event ExtendableEvent InstallEvent

Constructor

InstallEvent()

Creates a new InstallEvent object.

Instance properties

Inherits properties from its parent, ExtendableEvent.

Instance methods

Inherits methods from its parent, ExtendableEvent.

addRoutes()

Specifies one or more static routes, which define rules for fetching specified resources that will be used even before service worker startup.

Examples

This code snippet is from the service worker prefetch sample (see prefetch running live.) The code calls ExtendableEvent.waitUntil() in ServiceWorkerGlobalScope.oninstall and delays treating the ServiceWorkerRegistration.installing worker as installed until the passed promise resolves successfully. The promise resolves when all resources have been fetched and cached, or when any exception occurs.

The code snippet also shows a best practice for versioning caches used by the service worker. Although this example has only one cache, you can use this approach for multiple caches. The code maps a shorthand identifier for a cache to a specific, versioned cache name.

Note: Logging statements are visible in Google Chrome via the "Inspect" interface for the relevant service worker accessed via chrome://serviceworker-internals.

js
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);
      }),
  );
});

Specifications

Specification
Service Workers Nightly
# installevent

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
InstallEvent
Chrome – Full support
Chrome 40 (Release date: 2015-01-21)
footnote Full support
Edge – Full support
Edge 17 (Release date: 2018-04-30)
footnote Full support
Firefox – No support
Firefox
footnote No support
Opera – Full support
Opera 27 (Release date: 2015-01-27)
footnote Full support
Safari – No support
Safari
footnote No support
Chrome Android – Full support
Chrome Android 40 (Release date: 2015-01-21)
footnote Full support
Firefox for Android – No support
Firefox for Android
footnote No support
Opera Android – Full support
Opera Android 27 (Release date: 2015-01-29)
footnote Full support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – Full support
Samsung Internet 4 (Release date: 2016-03-11)
footnote Full support
WebView Android – Full support
WebView Android 40 (Release date: 2015-01-21)
footnote Full support
WebView on iOS – No support
WebView on iOS
footnote No support
InstallEvent() constructor
Experimental
Chrome – Full support
Chrome 40 (Release date: 2015-01-21)
footnote Full support
Edge – Full support
Edge 79 (Release date: 2020-01-15)
footnote Full support
Firefox – No support
Firefox
footnote No support
Opera – Full support
Opera 27 (Release date: 2015-01-27)
footnote Full support
Safari – No support
Safari
footnote No support
Chrome Android – Full support
Chrome Android 40 (Release date: 2015-01-21)
footnote Full support
Firefox for Android – No support
Firefox for Android
footnote No support
Opera Android – Full support
Opera Android 27 (Release date: 2015-01-29)
footnote Full support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – Full support
Samsung Internet 4 (Release date: 2016-03-11)
footnote Full support
WebView Android – Full support
WebView Android 40 (Release date: 2015-01-21)
footnote Full support
WebView on iOS – No support
WebView on iOS
footnote No support
addRoutes
Experimental
Chrome – Full support
Chrome 123 (Release date: 2024-03-19)
footnote Full support
Edge – Full support
Edge 123 (Release date: 2024-03-22)
footnote Full support
Firefox – No support
Firefox
footnote
footnote See bug 1855580
Opera – Full support
Opera 109 (Release date: 2024-03-27)
footnote Full support
Safari – No support
Safari
footnote
footnote See bug 269893
Chrome Android – Full support
Chrome Android 123 (Release date: 2024-03-19)
footnote Full support
Firefox for Android – No support
Firefox for Android
footnote
footnote See bug 1855580
Opera Android – Full support
Opera Android 82 (Release date: 2024-05-02)
footnote Full support
Safari on iOS – No support
Safari on iOS
footnote
footnote See bug 269893
Samsung Internet – Full support
Samsung Internet 27 (Release date: 2024-11-06)
footnote Full support
WebView Android – Full support
WebView Android 123 (Release date: 2024-03-19)
footnote Full support
WebView on iOS – No support
WebView on iOS
footnote
footnote See bug 269893

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

See also