1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
---
title: Cache.put()
slug: Web/API/Cache/put
tags:
- API
- Cache
- Experimental
- Method
- Reference
- Service Workers
- ServiceWorker
- put
translation_of: Web/API/Cache/put
---
<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
<p><span class="seoSummary">The <strong><code>put()</code></strong> method of the {{domxref("Cache")}} interface allows key/value pairs to be added to the current {{domxref("Cache")}} object.</span></p>
<p>Often, you will just want to {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} one or more requests, then add the result straight to your cache. In such cases you are better off using {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}}, as they are shorthand functions for one or more of these operations.</p>
<pre class="brush: js">fetch(url).then(function(response) {
if (!response.ok) {
throw new TypeError('Bad response status');
}
return cache.put(url, response);
})
</pre>
<div class="note">
<p><strong>Note</strong>: <code>put()</code> will overwrite any key/value pair previously stored in the cache that matches the request.</p>
</div>
<div class="note">
<p><strong>Note</strong>: {{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} do not cache responses with <code>Response.status</code> values that are not in the 200 range, whereas {{domxref("Cache.put")}} lets you store any request/response pair. As a result, {{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} can't be used to store opaque responses, whereas {{domxref("Cache.put")}} can.</p>
</div>
<div class="note">
<p><strong>Note</strong>: Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to the disk. More recent spec versions state 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.</p>
</div>
<h2 id="Syntax">Syntax</h2>
<pre class="brush: js">cache.put(request, response).then(function() {
// request/response pair has been added to the cache
});
</pre>
<h3 id="Parameters">Parameters</h3>
<dl>
<dt>request</dt>
<dd>The {{domxref("Request")}} you want to add to the cache.</dd>
<dt>response</dt>
<dd>The {{domxref("Response")}} you want to match up to the request.</dd>
</dl>
<h3 id="Return_value">Return value</h3>
<p>A {{jsxref("Promise")}} that resolves with void.</p>
<div class="note">
<p><strong>Note</strong>: The promise will reject with a <code>TypeError</code> if the URL scheme is not <code>http</code> or <code>https</code>.</p>
</div>
<h2 id="Examples" style="line-height: 30px; font-size: 2.14285714285714rem;">Examples</h2>
<p>This example is from the MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (see <a href="https://mdn.github.io/sw-test/">sw-test running live</a>). Here we wait for a {{domxref("FetchEvent")}} to fire. We construct a custom response like so:</p>
<ol>
<li>Check whether a match for the request is found in the {{domxref("CacheStorage")}} using {{domxref("CacheStorage.match","CacheStorage.match()")}}. If so, serve that.</li>
<li>If not, open the <code>v1</code> cache using <code>open()</code>, put the default network request in the cache using {{domxref("Cache.put","Cache.put()")}} and return a clone of the default network request using <code>return response.clone()</code>. Clone is needed because <code>put()</code> consumes the response body.</li>
<li>If this fails (e.g., because the network is down), return a fallback response.</li>
</ol>
<pre class="brush: js">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');
});</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Service Workers', '#dom-cache-put', 'Cache: put')}}</td>
<td>{{Spec2('Service Workers')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.Cache.put")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
<li>{{domxref("Cache")}}</li>
<li>{{domxref("WorkerGlobalScope.caches")}}</li>
</ul>
|
