共计 2568 个字符，预计需要花费 7 分钟才能阅读完成。
???? PWA 系列（一）——Cache API
PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。
PWA 主要用到了浏览器储存技术、Service Workers 技术、App Shell、Web Push API、以及一系列其他基础技术。本系列文章将逐一介绍所使用到的这些技术 ☀️
在 PWA 应用中，Cache 缓存 API 是关键技术之一，主要作用就是缓存相应和请求。只有在在线的情况下做好缓存，才能够在离线的情况下直接调用缓存而不必重新联网获取数据。虽然 Cache 是被定义在 SW 标准中的，但并非一定要与 SW 配合使用。????
使用 Cache 缓存的第一个步骤就是使用 CacheStorage.open(cacheName) 方法打开一个 Cache 对象，然后再是对具体的缓存内容执行 match, add, put, delete, keys 等操作。
API 概述
操作 Cache 又如下几个方法 (见 MDN)：
cache.match(request, options) 跟 Cache 对象匹配的第一个已经缓存的请求。
cache.matchall(request, options) 跟 Cache 对象匹配的所有请求组成的数组。
cache.add(request) 抓取这个 URL, 检索并把返回的 response 对象添加到给定的 Cache 对象. 这在功能上等同于调用 fetch(), 然后使用 cache.put() 将 response 添加到 cache 中.
cache.addall(requests) 抓取一个 URL 数组，检索并把返回的 response 对象添加到给定的 Cache 对象。
cache.put(request, response) 同时抓取一个请求及其响应，并将其添加到给定的 cache。
cache.delete(request, options) 搜索 key 值为 request 的 Cache 条目。如果找到，则删除该 Cache 条目，并且返回一个 resolve 为 true 的 Promise 对象；如果未找到，则返回一个 resolve 为 false 的 Promise 对象。
cache.keys(request, options) 返回一个 Promise 对象，resolve 的结果是 Cache 对象 key 值组成的数组。
如何使用
看个例子 ????
⚠️ 下面的例子全部在 chrome 调试工具的 console 面板书写，chrome 自带 async 因此可直接书写 await 异步代码
我们先抛开 SW 不谈，单单看下 Cache 的几个 API：
先定义 cacheName，相当于命名空间，你的缓存存储的地方 ????
const CACHE_VERSION = 1
const CACHE_NAME = ‘DEMO’ + CACHE_VERSION
然后调用 open 方法打开一个 Cache 对象：
const CACHE_VERSION = 1
const CACHE_NAME = ‘DEMO’ + CACHE_VERSION
+ cache = await caches.open(CACHE_NAME)
然后我们通过 Request 构造函数创建一个请求对象：
const CACHE_VERSION = 1
const CACHE_NAME = ‘DEMO’ + CACHE_VERSION
cache = await caches.open(CACHE_NAME)
+ let r = new Request(‘https://httpbin.org/image/png’)
首先调用 match 方法，因为并没有缓存过这个请求因此返回 undefined:
const CACHE_VERSION = 1
const CACHE_NAME = ‘DEMO’ + CACHE_VERSION
cache = await caches.open(CACHE_NAME)
let r = new Request(‘https://httpbin.org/image/png’)
+ await cache.match(r) // undefined
但一旦我们调用 fetch 方法和 put 方法或 add 方法，那么这个请求和响应数据都会被缓存了：
const CACHE_VERSION = 1
const CACHE_NAME = ‘DEMO’ + CACHE_VERSION
cache = await caches.open(CACHE_NAME)
let r = new Request(‘https://httpbin.org/image/png’)
– await cache.match(r)
+ await cache.add(r)
那么我们尝试再次 match，就可以获得对应的 Response 对象了：
const CACHE_VERSION = 1
const CACHE_NAME = ‘DEMO’ + CACHE_VERSION
cache = await caches.open(CACHE_NAME)
let r = new Request(‘https://httpbin.org/image/png’)
await cache.add(r)
+ const c = await cache.match(r)
+ console.log(c)
最后我们再看看 Application 中的 Cache Storage，中间就有这么一条缓存数据了：
尝试调用 keys 方法，输出我们 open 的 Caches 对象：
const CACHE_VERSION = 1
const CACHE_NAME = ‘DEMO’ + CACHE_VERSION
– cache = await caches.open(CACHE_NAME)
– let r = new Request(‘https://httpbin.org/image/png’)
– await cache.add(r)
– const c = await cache.match(r)
– console.log(c)
+ await caches.keys()
如果我们想要删掉这个 caches 对象，只需调用 delete 方法，并传入 cacheName 即可，返回 true 即表示删除成功：
– await caches.keys()
+ await caches.delete(CACHE_NAME)
Cache API 的主要操作基本是这样，下篇文章将继续介绍 PWA 的系列技术——Fetch
参考：
https://developer.mozilla.org…