{{APIRef("Service Workers API")}}{{SeeCompatTable}}
The CacheStorage
interface of the ServiceWorker API represents the storage for {{domxref("Cache")}} objects. It provides a master directory of all the named caches that a {{domxref("ServiceWorker")}} can access and maintains a mapping of string names to corresponding {{domxref("Cache")}} objects.
CacheStorage
also exposes {{domxref("CacheStorage.open()")}} and {{domxref("CacheStorage.match()")}}. Use {{domxref("CacheStorage.open()")}} to obtain a {{domxref("Cache")}} instance. Use {{domxref("CacheStorage.match()")}} to check if a given {{domxref("Request")}} is a key in any of the {{domxref("Cache")}} objects that the CacheStorage
object tracks.
You can access CacheStorage
through the global {{domxref("WorkerGlobalScope.caches", "caches")}} property.
CacheStorage
interface is exposed to windowed scopes as well as workers; you don't have to use it in conjunction with service workers.SecurityError
on untrusted origins (i.e. those that aren't using HTTPS.)Methods
- {{domxref("CacheStorage.match()")}}
- Checks if a given {{domxref("Request")}} is a key in any of the {{domxref("Cache")}} objects that the {{domxref("CacheStorage")}} object tracks and returns a {{jsxref("Promise")}} that resolves to that match.
- {{domxref("CacheStorage.has()")}}
- Returns a {{jsxref("Promise")}} that resolves to
true
if a {{domxref("Cache")}} object matching thecacheName
exists. - {{domxref("CacheStorage.open()")}}
- Returns a {{jsxref("Promise")}} that resolves to the {{domxref("Cache")}} object matching the
cacheName
(a new cache is created if it doesn't exist.) - {{domxref("CacheStorage.delete()")}}
- Finds the {{domxref("Cache")}} object matching the
cacheName
, and if found, deletes the {{domxref("Cache")}} object and returns a {{jsxref("Promise")}} that resolves totrue
. If no {{domxref("Cache")}} object is found, it returnsfalse
. - {{domxref("CacheStorage.keys()")}}
- Returns a {{jsxref("Promise")}} that will resolve with an array containing strings corresponding to all of the named {{domxref("Cache")}} objects tracked by the {{domxref("CacheStorage")}}. Use this method to iterate over a list of all the {{domxref("Cache")}} objects.
Examples
This code snippet is from the MDN sw-test example (see sw-test running live.) This service worker script waits for an {{domxref("InstallEvent")}} to fire, then runs {{domxref("ExtendableEvent.waitUntil","waitUntil")}} to handle the install process for the app. This consists of calling {{domxref("CacheStorage.open")}} to create a new cache, then using {{domxref("Cache.addAll")}} to add a series of assets to it.
In the second code block, we wait for a {{domxref("FetchEvent")}} to fire. We construct a custom response like so:
- Check whether a match for the request is found in the CacheStorage. If so, serve that.
- If not, fetch the request from the network, then also open the cache created in the first block and add a clone of the request to it using {{domxref("Cache.put")}} (
cache.put(event.request, response.clone())
.) - If this fails (e.g. because the network is down), return a fallback response.
Finally, return whatever the custom response ended up being equal to, using {{domxref("FetchEvent.respondWith")}}.
this.addEventListener('install', function(event) { event.waitUntil( caches.open('v1').then(function(cache) { return cache.addAll([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyHunters.jpg', '/sw-test/gallery/myLittleVader.jpg', '/sw-test/gallery/snowTroopers.jpg' ]); }) ); }); this.addEventListener('fetch', function(event) { var cachedResponse = caches.match(event.request).catch(function() { return fetch(event.request).then(function(response) { return caches.open('v1').then(function(cache) { cache.put(event.request, response.clone()); return response; }); }); }).catch(function() { return caches.match('/sw-test/gallery/myLittleVader.jpg'); }); event.respondWith(cachedResponse); });
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}} | {{Spec2('Service Workers')}} | Initial definition. |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | {{CompatChrome(40.0)}} | {{CompatGeckoDesktop(41)}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatNo}} |
Accessible from {{domxref("Window")}} | {{CompatChrome(43.0)}} | {{CompatGeckoDesktop(41)}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
Accessible from {{domxref("WorkerGlobalScope")}} | {{CompatChrome(43.0)}} | {{CompatGeckoDesktop(41)}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatNo}} | {{CompatGeckoMobile(41)}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatChrome(40.0)}} |
Accessible from {{domxref("Window")}} | {{CompatNo}} | {{CompatNo}} | {{CompatGeckoMobile(41)}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatChrome(43.0)}} |
Accessible from {{domxref("WorkerGlobalScope")}} | {{CompatNo}} | {{CompatNo}} | {{CompatGeckoMobile(41)}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatChrome(43.0)}} |
See also
- Using Service Workers
- {{domxref("Cache")}}
- {{domxref("WorkerGlobalScope.caches")}}