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 Cache
interface provides a storage mechanism for Request
/ Response
object pairs that are cached, for example as part of the ServiceWorker
life cycle. Note that the Cache
interface is exposed to windowed scopes as well as workers. You don't have to use it in conjunction with service workers, even though it is defined in the service worker spec.
An origin can have multiple, named Cache
objects. You are responsible for implementing how your script (e.g. in a ServiceWorker
) handles Cache
updates. Items in a Cache
do not get updated unless explicitly requested; they don’t expire unless deleted. Use CacheStorage.open(cacheName)
to open a specific named Cache
object and then call any of the Cache
methods to maintain the Cache
.
You are also responsible for periodically purging cache entries. Each browser has a hard limit on the amount of cache storage that a given origin can use. The browser does its best to manage disk space, but it may delete the Cache storage for an origin. The browser will generally delete all of the data for an origin or none of the data for an origin. Make sure to version caches by name and use the caches only from the version of the script that they can safely operate on. See Deleting old caches for more information.
Note: Initial Cache implementations (in both Blink and Gecko) resolve Cache.add
, Cache.addAll
, and Cache.put
promises when the response body is fully written to storage. More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.
Note: The key matching algorithm depends on the VARY header in the value. So matching a new key requires looking at both key and value for entries in the Cache.
Note: The caching API doesn't honor HTTP caching headers.
Methods
Cache.match(request, options)
- Returns a
Promise
that resolves to the response associated with the first matching request in theCache
object. Cache.matchAll(request, options)
- Returns a
Promise
that resolves to an array of all matching requests in theCache
object. Cache.add(request)
- Takes a URL, retrieves it and adds the resulting response object to the given cache. This is fuctionally equivalent to calling fetch(), then using Cache.put() to add the results to the cache.
Cache.addAll(requests)
- Takes an array of URLs, retrieves them, and adds the resulting response objects to the given cache.
Cache.put(request, response)
- Takes both a request and its response and adds it to the given cache.
Cache.delete(request, options)
- Finds the
Cache
entry whose key is the request, and if found, deletes theCache
entry and returns aPromise
that resolves totrue
. If noCache
entry is found, it returnsfalse
. Cache.keys(request, options)
- Returns a
Promise
that resolves to an array ofCache
keys.
Examples
This code snippet is from the service worker selective caching sample. (see selective caching live) The code uses CacheStorage.open(cacheName)
to open any Cache
objects with a Content-Type header that starts with font/
.
The code then uses Cache.match(request, options)
to see if there's already a matching font in the cache, and if so, returns it. If there isn't a matching font, the code fetches the font from the network and uses Cache.put(request, response)
to cache the fetched resource.
The code handles exceptions thrown from the fetch()
operation. Note that a HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set.
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. The code also deletes all caches that aren't named in CURRENT_CACHES
.
In the code example, "caches" is an attribute of the service workers WorkerGlobalScope. It holds the CacheStorage object, which by we can access the CacheStorage API.
var CACHE_VERSION = 1; // Shorthand identifier mapped to specific versioned cache. var CURRENT_CACHES = { font: 'font-cache-v' + CACHE_VERSION }; self.addEventListener('activate', function(event) { var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) { return CURRENT_CACHES[key]; }); // Active worker won't be treated as activated until promise resolves successfully. event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (expectedCacheNames.indexOf(cacheName) == -1) { console.log('Deleting out of date cache:', cacheName); return caches.delete(cacheName); } }) ); }) ); }); self.addEventListener('fetch', function(event) { console.log('Handling fetch event for', event.request.url); event.respondWith( // Opens Cache objects that start with 'font'. caches.open(CURRENT_CACHES['font']).then(function(cache) { return cache.match(event.request).then(function(response) { if (response) { console.log(' Found response in cache:', response); return response; } }).catch(function(error) { // Handles exceptions that arise from match() or fetch(). console.error(' Error in fetch handler:', error); throw error; }); }) ); });
Specifications
Specification | Status | Comment |
---|---|---|
Service Workers The definition of 'Cache' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 40.0 | 39 (39)[1] | No support | 24 | No support |
add() | 44.0 | (Yes)[1] | ? | ? | ? |
addAll() | 46.0 | (Yes)[1] | ? | ? | ? |
matchAll() | 47.0 | (Yes)[1] | ? | ? | ? |
Require HTTPS for add() , addAll() , and put() |
46.0 | (Yes)[1] | ? | ? | ? |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | No support | No support | 39.0 (39) | ? | No support | ? | No support | 40.0 |
add() | No support | No support | (Yes) | ? | ? | ? | ? | 44.0 |
addAll() | No support | No support | (Yes) | ? | ? | ? | ? | 46.0 |
matchAll() | No support | No support | (Yes) | ? | ? | ? | ? | 46.0 |
Require HTTPS for add() , addAll() , and put() |
No support | No support | (Yes) | ? | ? | ? | ? | 46.0 |
[1] Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR.)