CacheStorage

方法

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");
      }),
  );
});

说明

浏览器兼容性

参见

• 使用 Service Worker
• Cache
• Window.caches 和 WorkerGlobalScope.caches
• 隐私浏览/隐身模式