用 Vue 做 PWA（二）：Runtime Caching

本系列已经很久没更新了，在此讨论实践过程中遇到的 Runtime Caching 的一些问题。主要注意点是在处理跨域请求上。

vue-pwa

注意整理博客时将原来滥竽充数的 (二) 改名, 这篇原来的 (三) 变成 (二)

Runtime Caching 是指除了网页的 js 和 css 资源之类的以外，对运行时请求的资源进行缓存。接下来讨论如下配置：

runtimeCaching: [
  {
    urlPattern: /.*/,
    handler: 'StaleWhileRevalidate',
    options: {
      cacheName: 'Example',
      expiration: {
        maxAgeSeconds: 86400 * 15
      },
      cacheableResponse: {
        statuses: [0, 200]
      }
    }
  }
]

`urlPattern`

需要缓存的请求 URL，可以是一个字符串、正则表达式，甚至一个回调函数。对于跨域请求，必须从头到尾匹配正则表达式。如果喜欢暴力，那么就可以使用/.*/来缓存所有请求。

不透明响应 (Opaque Response)

Reference https://developers.google.com/web/tools/workbox/guides/handle-third-party-requests

如果跨域请求不是 CORS，或者发起的姿势不对（比如没有使用 crossorigin="anonymous" ）导致原本支持 CORS 的变成了 no-cors，那么你就会得到 Opaque Response。对于 Opaque Response，你不能以任何方式得到返回的信息，甚至连返回代码都不知道，永远是 0。只能将其作为图片资源等。对于 staleWhileRevalidate 和 networkFirst 策略会默认缓存，但是对于 cacheFirst 策略默认不缓存。所以需要使用

cacheableResponse: {
  statuses: [0, 200]
}

来强行缓存 Opaque Response。注意如果请求发生错误，也会被缓存！请谨慎选择缓存策略，比如首次出错的 cacheFirst 将导致以后一直拿不到正确结果。

Opaque Response 的大小也是不能读取的，所以 Chrome 会虚报大小，比如几 K 的图片会占用几 M 的空间！于是你会更快地达到空间限制。显然 Chrome 不会傻到真的占用了那么多磁盘空间。

`handler` 缓存策略

形象的图：https://developers.google.com/web/tools/workbox/modules/workbox-strategies
图 + 代码：https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#serving-suggestions
API Reference: https://developers.google.com/web/tools/workbox/reference-docs/v2/module-workbox-sw.Strategies

`expiration`

有的时候缓存会变动，有点资源变动后以后都用不着了，得清除出去，所以可以设置过期时间。

AllanChain / blog