用 Vue 做 PWA（二）：Runtime Caching

View Post on Blog

在此讨论实践过程中遇到的 Runtime Caching 的一些问题。主要注意点是在处理跨域请求上。

---

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。只能将其作为图片资源等，而且是默认不缓存的。所以需要使用

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

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