这篇翻译不完整。请帮忙从英语翻译这篇文章

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

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.

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support40 Yes441 No27 No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support4040 Yes4427 Yes ?

1. Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR.)

See also

文档标签和贡献者

此页面的贡献者: flyingsouthwind
最后编辑者: flyingsouthwind,