InstallEvent

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The parameter passed into the oninstall handler, 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.

Constructor

InstallEvent.InstallEvent()
Creates a new InstallEvent object.

Properties

Inherits properties from its ancestor, Event.

InstallEvent.activeWorker Read only
Returns the ServiceWorker that is currently actively controlling the page.

Methods

Inherits methods from its parent, ExtendableEvent.

Examples

This code snippet is from the service worker prefetch sample (see prefetch running live.) The code calls ExtendableEvent.waitUntil(any value) 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 else 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.

var CACHE_VERSION = 1;
var CURRENT_CACHES = {
  prefetch: 'prefetch-cache-v' + CACHE_VERSION
};
self.addEventListener('install', function(event) {
  var 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(function(cache) {
      cache.addAll(urlsToPrefetch.map(function(urlToPrefetch) {
        return new Request(urlToPrefetch, {mode: 'no-cors'});
      })).then(function() {
        console.log('All resources have been fetched and cached.');
      });
    }).catch(function(error) {
      console.error('Pre-fetching failed:', error);
    })
  );
});

Specifications

Specification Status Comment
Service Workers Working Draft As of May 2015, the install event is an instance of ExtendableEvent rather than a child of it.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 40.0 44.0 (44.0)[1] No support 24 No support
Feature Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? 44.0 (44.0) (Yes) No support ? No support 40.0

[1] Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)

See also

Document Tags and Contributors

Tags: 
 Contributors to this page: chrisdavidmills, Sebastianz, jpmedley, wt1125
 Last updated by: chrisdavidmills,