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