? 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...

? PWA 系列（一）——Cache API