PWA & Service Workers collections

[lbwa]

缓存

缓存策略应该是 networkFirst 网络请求优先，而不是 cacheFirst 缓存优先。这样可以保证在每次打开页面时首先请求网络验证缓存是否需要更新。否则只要本地存在缓存时，都不会请求源服务器，即使源服务器已经更新，client 端仍会优先使用缓存。所以缓存策略应该是 network first。

以 workbox 为例：

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js')

const workboxSW = new self.WorkboxSW({
  "cacheId": "some-data",
  "clientsClaim": true,
  "directoryIndex": "/"
})

workboxSW.precache([
  {
    "url": "/_data/app.6866b.js",
    "revision": "c708b23519be872c35fa1d141ebbc30f"
  },
  // ...
])

workbox.routing.registerRoute(
  new Reg('/.*'),
  workbox.strategies.netWorkFirst({}),
  'GET'
)

[lbwa]

Serivce Worker

1. Secure Origins
   Serivce Worker 仅能在 Secure Origins 下工作，那么在本地开发时，不能 使用 192.168.*.** （此时是默认的 http 协议） 来访问有 service worker 的页面，因为此时 service worker 无法注册，访问页面将导致报错。

client 的 url 必须满足以下条件之一（scheme, host, port）

• (https, *, *) https 协议
• (wss, *, *) wss 协议
• (*, localhost, *) host 为 locahost 的本地开发环境服务器
• (*, 127/8, *) 127 本地局域网字段
• (*, ::1/128, *) IPv6 本地局域网字段，相当于 IPv4 的 127.0.0.1/8
• (file, *, —) file 协议
• (chrome-extension, *, —) chrome 插件

notice: 第三条 localhost 规则不予 https 协议规则矛盾，因为只需满足一个条件 service work 就可以注册成功。

对于需要远程开发访问的情况下，可使用 nginx 代理，将本机 192.168.*.** 代理到 localhost 域下，远程设备即可正常注册 service worker。

2. 注册

当旧版本的 service worker 仍有页面保持与其连接时，那么新版本 service worker 只 会下载直至旧版本 service worker 没有任何页面与其关联时，才会注册，并更新 service worker，之前 service worker 的缓存将被删除。

• 边界情况

另外当一个页面即将注册 serive worker 时（之前该页面没有 serive worker），只要在该页面下 serive worker 注册前在 client 打开的页面都要先 关闭（即需要在本机关闭所有 无 serive worker 的版本 的页面），新的页面的 serive worker 才能注册成功。否则请求新的页面将因 serive worker 无法正常注册而导致请求的资源（如 css）报错 404。