用 Vue 做 PWA（二）：Runtime Caching

programming vue-pwa pwa vue
2020-04-18
2021-03-13
Header: vue-pwa

This article is a bit old and the content may be outdated, so please refer to it with caution and remember to check the latest official materials (such as documentation, etc.)

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

This series contains the following posts:

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

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

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

js

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]
}

js

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

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

handler 缓存策略#

expiration#

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

Leave your comments and reactions on GitHub