The put()
method of the Cache
interface allows key/value pairs to be added to the current Cache
object.
Often, you will just want to fetch()
one or more requests, then add the result straight to your cache. In such cases you are better off using Cache.add()
/Cache.addAll()
, as they are shorthand functions for one or more of these operations.
fetch(url).then(function(response) {
if (!response.ok) {
throw new TypeError('Bad response status');
}
return cache.put(url, response);
})
Note: put()
will overwrite any key/value pair previously stored in the cache that matches the request.
Note: Cache.add
/Cache.addAll
do not cache responses with Response.status
values that are not in the 200 range, whereas Cache.put
lets you store any request/response pair. As a result, Cache.add
/Cache.addAll
can't be used to store opaque responses, whereas Cache.put
can.
Syntax
cache.put(request, response).then(function() { // request/response pair has been added to the cache });
Parameters
- request
- The
Request
object or URL that you want to add to the cache. - response
- The
Response
you want to match up to the request.
Return value
A Promise
that resolves with undefined
.
Note: The promise will reject with a TypeError
if the URL scheme is not http
or https
.
Examples
This example is from the MDN sw-test example (see [[../../../../../../../mdn.github.io/sw-test/index|sw-test running live]]). Here we wait for a FetchEvent
to fire. We construct a custom response like so:
- Check whether a match for the request is found in the
CacheStorage
usingCacheStorage.match()
. If so, serve that. - If not, open the
v1
cache usingopen()
, put the default network request in the cache usingCache.put()
and return a clone of the default network request usingreturn response.clone()
. Clone is needed becauseput()
consumes the response body. - If this fails (e.g., because the network is down), return a fallback response.
var response;
var cachedResponse = caches.match(event.request).catch(function() {
return fetch(event.request);
}).then(function(r) {
response = r;
caches.open('v1').then(function(cache) {
cache.put(event.request, response);
});
return response.clone();
}).catch(function() {
return caches.match('/sw-test/gallery/myLittleVader.jpg');
});
Specifications
Specification | Status | Comment |
Service WorkersThe definition of 'Cache: put' in that specification. | Working Draft | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome Full support 43 Full support 43 Notes' Requires HTTPS from version 46. |
Edge
Full support 16 |
Firefox Full support 39 Full support 39 Notes' Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API. |
IE
No support No |
Opera Full support 30 Full support 30 Notes' Requires HTTPS from version 33. |
Safari
Full support 11 |
WebView Android Full support 43 Full support 43 Notes' Requires HTTPS from version 46. |
Chrome Android Full support 43 Full support 43 Notes' Requires HTTPS from version 46. |
Firefox Android
Full support 39 |
Opera Android Full support 30 Full support 30 Notes' Requires HTTPS from version 33. |
Safari iOS
Full support 11 |
Samsung Internet Android Full support 4.0 Full support 4.0 Notes' Requires HTTPS from Samsung Internet 5.0. |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
- See implementation notes.'
- See implementation notes.
See also
Cache.put() by Mozilla Contributors is licensed under CC-BY-SA 2.5.