CacheStorage - Web API 接口参考编辑

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

CacheStorage 接口表示 Cache 对象的存储。它提供了一个 ServiceWorker 、其它类型worker或者 window 范围内可以访问到的所有命名cache的主目录（它并不是一定要和service workers一起使用，即使它是在service workers规范中定义的），并维护一份字符串名称到相应 Cache 对象的映射。

CacheStorage 同样暴露了 CacheStorage.open() 和 CacheStorage.match()方法。使用 CacheStorage.open() 获取 Cache 实例。使用 CacheStorage.match() 检查给定的 Request 是否是 CacheStorage 对象跟踪的任何 Cache 对象中的键。

你可以通过 caches 属性访问 CacheStorage .

注意: CacheStorage 总是对不受信任的源（即那些不使用HTTPS，尽管此定义将来很可能变得更加复杂。）使用 SecurityError reject. 测试时，你可以在Firefox Devtools选项/齿轮菜单中通过选中"通过HTTP启用 Service Workers (当工具箱打开时)" 选项来绕开这个限制。注意: CacheStorage.match() 是一个便捷方法。匹配cache条目的同等功能可以通过执行 CacheStorage.open() 打开cache，使用 CacheStorage.keys() 返回它包含的条目，并将你所需的条目与 CacheStorage.match() 匹配。

方法

CacheStorage.match(): 检查给定的 Request 是否是 CacheStorage 对象跟踪的任何 Cache 对象的键，并返回一个resolve为该匹配的 Promise .
CacheStorage.has(): 如果存在与 cacheName 匹配的 Cache 对象，则返回一个resolve为true的 Promise .
CacheStorage.open(): 返回一个 Promise ，resolve为匹配 cacheName （如果不存在则创建一个新的cache）的 Cache 对象
CacheStorage.delete(): 查找匹配 cacheName 的 Cache 对象，如果找到，则删除 Cache 对象并返回一个resolve为true的 Promise 。如果没有找到 Cache 对象，则返回 false.
CacheStorage.keys(): 返回一个 Promise ，它将使用一个包含与 CacheStorage 追踪的所有命名 Cache 对象对应字符串的数组来resolve. 使用该方法迭代所有 Cache 对象的列表。

示例

此代码片段来自于MDN sw-test example （请参阅sw-test running live.）此 service worker 脚本等待 InstallEvent 触发，然后运行 waitUntil 来处理应用程序的安装过程。这包括调用 CacheStorage.open 创建一个新的cache，然后使用 Cache.addAll 向其添加一系列资源。

在第二个代码块，我们等待 FetchEvent 触发。我们构建自定义相应，像这样：

检查CacheStorage中是否找到了匹配请求的内容。如果是，使用匹配内容。
如果没有，从网络获取请求，然后同样打开第一个代码块中创建的cache，并使用 Cache.put (cache.put(event.request, response.clone()).) 将请求的clone副本添加到它。
如果此操作失败（例如，因为网络关闭），返回备用相应。

最后，使用 FetchEvent.respondWith 返回自定义响应最终等于的内容。

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/sw-test/',
        '/sw-test/index.html',
        '/sw-test/style.css',
        '/sw-test/app.js',
        '/sw-test/image-list.js',
        '/sw-test/star-wars-logo.jpg',
        '/sw-test/gallery/bountyHunters.jpg',
        '/sw-test/gallery/myLittleVader.jpg',
        '/sw-test/gallery/snowTroopers.jpg'
      ]);
    })
  );
});

this.addEventListener('fetch', function(event) {
  var response;
  event.respondWith(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	Status	Comment
Service Workers CacheStorage	Working Draft	Initial definition.

浏览器兼容

BCD tables only load in the browser

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.