CacheStorage

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

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

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

你可以通过窗口的 Window.caches 属性或 worker 的 WorkerGlobalScope.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 触发。我们构建自定义相应，像这样：

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

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

js
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
Service Workers
# cachestorage-interface

浏览器兼容性

参见