Cache.put()
Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
Cache
接口的 put()
方法 允许将键/值对添加到当前的 Cache
对象中。
通常,你只想 fetch()
一个或多个请求,然后直接添加结果到 cache 中。这种情况下,最好使用 Cache.add()
/Cache.addAll()
,因为它们是一个或者多个这些操作的便捷方法。
fetch(url).then(function(response) {
if (!response.ok) {
throw new TypeError('Bad response status');
}
return cache.put(url, response);
})
备注: put()
将覆盖先前存储在匹配请求的 cache 中的任何键/值对。
备注: Cache.add
/Cache.addAll
不会缓存 Response.status
值不在 200 范围内的响应,而 Cache.put
允许你存储任何请求/响应对。因此,Cache.add
/Cache.addAll
不能用于不透明的响应,而 Cache.put
可以。
备注: 当响应主体完全写入磁盘时,初始 Cache 执行 (在 Blink 和 Gecko 中) resolve Cache.add
、Cache.addAll
和 Cache.put
promise. 更新的规范版本中声明:即使响应主体仍在流式传输,一旦条目被记录到数据库中,浏览器就可以 resolve promise.
语法
cache.put(request, response).then(function() { // request/response pair has been added to the cache });
参数
返回值
A Promise
that resolves with void.
备注: The promise will reject with a TypeError
if the URL scheme is not http
or https
.
示例
This example is from the MDN sw-test example (see 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');
});
规范
Specification |
---|
Service Workers # cache-put |
浏览器兼容性
BCD tables only load in the browser