{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}
The InstallEvent
interface represents an install action that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a {{domxref("ServiceWorker")}}. As a child of {{domxref("ExtendableEvent")}} it ensures that functional events (like {{domxref("FetchEvent")}}) are not dispatched during installation.
Properties
Inherits properties from its ancestor, {{domxref("Event")}}.
Methods
Inherits methods from its parent, {{domxref("ExtendableEvent")}}.
Examples
This code snippet is from the service worker fetch sample. The code calls {{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil(any value)")}} in {{domxref("ServiceWorkerGlobalScope.oninstall")}}, delaying treating the {{domxref("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. 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: Logging statements are visible via the "Inspect" interface for the relevant SW 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 |
---|---|---|
{{SpecName('Service Workers', '#install-event-section', 'FetchEvent')}} | {{Spec2('Service Workers')}} | Initial definition. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatChrome(40.0)}} | {{CompatNo}} | {{CompatNo}} | 24 | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatNo}} | {{CompatChrome(40.0)}} |
See also
- {{jsxref("Promise")}}
- Fetch API