PWA 学习笔记之 CacheStorage API

Progressive Web App （PWA）是渐进增强 Web App，它能让我们在不可靠的网络上也能快速加载、能够接收桌面通知、具有桌面图标，并且可采用顶层全屏体验的方式加载。

在 PWA 学习笔记之 fetch API 这篇文章中，我们介绍 fetch API 相关的一些基础知识，在该文章末尾我们还介绍了它在 PWA 应用中的使用场景，在具体的使用示例中，我们应用了 CacheStorage API。CacheStorage API（缓存存储应用程序接口），顾名思义是用来实现资源存储。该接口提供缓存 Request / Response 对象对的存储机制，尽管它被定义在 service worker 的标准中，但它不一定要配合 service worker 使用，接下来我们就来会一会 CacheStorage API。

首先我们来回顾一下 fetch API 文章中使用的示例：

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      // 若缓存不存在，则使用fetch API从网上获取，然后利用Cache API缓存资源。
      return response || fetch(event.request).then((response) => {
          return caches.open('v1').then((cache) => {
            cache.put(event.request, response.clone());
            return response;
          });
     }); 
   })
  );
});

这个示例中，我们监听页面的 fetch 事件，对页面请求事件进行拦截，然后使用 event.respondWith 设置响应对象。在设置响应对象时，我们会优先从缓存中获取，若请求命中，则直接从缓存中获取已缓存的对象，直接返回。若请求未命中，则通过 fetch API 从远程获取对应的资源，当资源请求成功时，我们通过 open 方法获取 v1 版本的 CacheStorage 实例，然后调用该实例的 put 方法，进行资源缓存。

这里需要注意的是，在使用 cache对象的 put 方法保存资源时，我们调用 response 对象的 clone 方法，而不是直接保存 response 对象。为什么需要克隆响应对象呢？这是因为 Request 和 Response 的 body （响应体）只能被读取一次！它们有一个属性叫 bodyUsed，读取一次之后设置为 true，就不能再读取了。

通过上面的示例，我们简单介绍了 CacheStorage API 中的一些常用方法。接下来我们趁热打铁，来系统地了解一下目前 CacheStorage 已有的 API。

CacheStorage API 简介

• CacheStorage.match()：返回一个 Promise 对象，用于判断给定的请求对象是否已被缓存。若匹配则返回已缓存的对象。

caches.match(request, options).then(function(response) {
  // Do something with the response
});

• CacheStorage.has()：返回一个 Promise 对象，用于判断 cacheName 对应的 Cache 对象是否存在。若 cacheName 对应的 Cache 对象存在，则返回 true 否则返回 false。

caches.has(cacheName).then(function(boolean) {
  // true: 缓存存在
});

• CacheStorage.open()：返回一个 Promise 对象，用于获取 cacheName 对应的 Cache 对象。若 cacheName 对应的 Cache 存在则返回对应的 Cache 对象，若不存在的话，则会创建一个新的 Cache 对象。

caches.open(cacheName).then(function(cache) {
  // Do something with your cache
});

• CacheStorage.delete()：返回一个 Promise 对象，用于删除 cacheName 对应的 Cache 对象。若 cacheName 对应的 Cache 对象存在且被成功删除，则返回 true，否则返回 false。

caches.delete(cacheName).then(function(true) {
  //your cache is now deleted
});

• CacheStorage.keys()：返回一个 Promise 对象，用于获取 CacheStorage 对象中已存在的缓存名称列表。

caches.keys().then(function(keyList) {
  //do something with your keyList
});

CacheStorage API 使用示例

CacheStorage.match()

caches.match(event.request).then(function(response) {
  return response || fetch(event.request).then(function(r) {
    caches.open('v1').then(function(cache) {
      cache.put(event.request, r);
    });
    return r.clone();
  });
}).catch(function() {
  return caches.match('/sw-test/gallery/myLittleVader.jpg');
});

CacheStorage.has()

caches.has('v1').then(function(hasCache) {
  if (!hasCache) { // v1对应的Cache对象不存在
    someCacheSetupfunction();
  } else {
    caches.open('v1').then(function(cache) {
      return cache.addAll(myAssets);
    });
  }
}).catch(function() {
  // 处理异常
});

CacheStorage.open()

var cachedResponse = caches.match(event.request)
 .catch(function() {
    return fetch(event.request);
  }).then(function(response) {
    caches.open('v1').then(function(cache) {
      cache.put(event.request, response);
  });
  return response.clone();
}).catch(function() {
  return caches.match('/sw-test/gallery/myLittleVader.jpg');
});

CacheStorage.delete() & caches.keys()

this.addEventListener('activate', function(event) {
  var cacheWhitelist = ['v2']; // 缓存的白名单
  event.waitUntil(
    caches.keys().then(function(keyList) { // 返回已缓存的缓存名称列表
      return Promise.all(keyList.map(function(key) {
        if (cacheWhitelist.indexOf(key) === -1) { // 删除不含有v2的缓存对象
          return caches.delete(key);
        }
      }));
    })
  );
});

以上 CacheStorage API 相关示例来源于 MDN - CacheStorage 缓存存储。

一口气分析完了 CacheStorage 相关的 API，不知道小伙伴有没有疑问。感觉对刚了解 PWA 的小伙伴们来说，会对示例中所使用的 fetch 或 activate 事件感到疑惑，这个不用着急。接下来的文章我们会来揭开它们神秘的面纱。

本文介绍了 CacheStorage API 的相关基础知识，最后我们来介绍一个小知识 —— 如何查看已缓存的资源？其实这个很简单，容我偷个懒，这里只介绍 Chrome 浏览器如何查看。准备好了么？Follow Me！

1. 打开 Chrome 浏览器
2. 打开开发者工具
3. 切换到 Application Tab 页
4. 选择左侧 Cache 菜单下的 CacheStorage 选项

初探 CacheStorage API 到此结束，下一篇就是介绍我们的 Service Workers 了，它可是 PWA 的核心 “人物 ” 哟。目前刚开始学习 PWA，有误之处，请小伙伴们多多指教。