CacheStorage

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

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 (en-US) 属性访问 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 触发。我们构建自定义相应,像这样:

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

最后,使用 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

参见