ServiceWorkerGlobalScope: install event

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.

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Note: This feature is only available in Service Workers.

The install event of the ServiceWorkerGlobalScope interface is fired when a ServiceWorkerRegistration acquires a new ServiceWorkerRegistration.installing worker.

This event is not cancelable and does not bubble.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

js
addEventListener("install", (event) => { })

oninstall = (event) => { }

Event type

An ExtendableEvent. Inherits from Event.

Event ExtendableEvent

Examples

The following snippet shows how an install event handler can be used to populate a cache with a number of responses, which the service worker can then use to serve assets offline:

js
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches
      .open("v1")
      .then((cache) =>
        cache.addAll([
          "/",
          "/index.html",
          "/style.css",
          "/app.js",
          "/image-list.js",
          "/star-wars-logo.jpg",
          "/gallery/",
          "/gallery/bountyHunters.jpg",
          "/gallery/myLittleVader.jpg",
          "/gallery/snowTroopers.jpg",
        ]),
      ),
  );
});

You can also set up the event handler using the oninstall property:

js
self.oninstall = (event) => {
  // …
};

Specifications

Specification
Service Workers Nightly
# dom-serviceworkerglobalscope-oninstall

Browser compatibility

See also