CacheStorage
============

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

**`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` 返回自定义响应最终等于的内容。


```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 |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Using Service Workers (en-US)
* `Cache`
* `WorkerGlobalScope.caches` (en-US)