CacheStorage.open()

Experimental

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

CacheStorage 接口的 open() 方法返回一个resolve为匹配 cacheName 的 Cache 对象的 Promise .

注意: 如果指定的 Cache 不存在,则使用该 cacheName 创建一个新的cache,并返回一个resolve为该新 Cache 对象的Promise.

语法

// "caches" is a global read-only variable, which is an instance of CacheStorage,
// For more info, refer to: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/caches

caches.open(cacheName).then(function(cache) {
  // Do something with your cache
});

参数

cacheName
要打开的cache对象name.

返回值

一个resolve为请求的 Cache 对象的 Promise .

示例

此示例来自于MDN sw-test example (请参阅 sw-test running live)。这里,等待 FetchEvent 事件触发。我们构建自定义响应,像这样:

  1. 使用 CacheStorage.match() 检查 CacheStorage 中是否存在匹配请求,如果存在,则使用它。
  2. 如果没有,使用  CacheStorage.open() 打开 v1 cache,使用 Cache.put()  将默认网络请求放入 cache 中,并使用 return response.clone() 返回默认网络请求的克隆副本。最后一个是必须的,因为 put() 使用响应主体。
  3. 如果此操作失败(例如,因为网络已关闭),则返回备用响应。
var cachedResponse = caches.match(event.request).catch(function() {
  return fetch(event.request);
}).then(function(response) {
  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 Status Comment
Service Workers
CacheStorage
Working Draft Initial definition.

浏览器兼容性

BCD tables only load in the browser

See also