PWA 系列(一)——Cache API

时间:2022-06-19
本文章向大家介绍PWA 系列(一)——Cache API,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

? 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 方法,输出我们 openCaches 对象:

    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/zh-CN/docs/Web/API/Cache