Service Worker 缓存文件处理

214

交代背景

前段时间升级了一波Google Chrome,发现我的JulyNovel站点Ctrl+F5也刷新不了,后来发现是新的Chrome已经支持Service Worker,而我的JulyNovel也满足https这个硬性条件。 之前加载过的css和js都被缓存了。 所以这里是有点小问题的,毕竟我服务器更新了,你service worker 没给我更新缓存,就说不过去了。

生命周期

特地跑到Google Develop去看了下究竟是怎么运转的。

Service Worker生命周期的意义

1.实现离线优先(这个不谈,没网也能搞事?这妥妥的Native的能力啊) 2.允许新服务工作线程自行做好运行准备,无需中断当前的服务工作线程。(准备替换旧的service woker) 3.确保整个过程中作用域页面由同一个服务工作线程(或者没有服务工作线程)控制。 4.确保每次只运行网站的一个版本。

install

根据我的理解,这个环节只在第一次打开网站时加载,一系列操作保证其原子性(要么可用,要么废弃)

Activate

service worker被激活,某些请求就会变成 from ServiceWorker

更新service worker

这里就是解决问题的关键了。 首先,会触发更新的情况如下

  1. 导航到一个作用域内的页面。
  2. 更新 push 和 sync 等功能事件,除非在前 24 小时内进行了更新检查。
  3. 调用 .register(),仅在ServiceWorker网址已发生变化时。
  4. 在获取更新时遵循(长达 24 小时)服务工作线程脚本上的缓存标头。 我们将创建此选择加入行为,因为它可以发现问题。 在您的服务工作线程脚本上,您可能需要 max-age 为 0。 更新流程

TIM图片20191020164831.png

  1. install 装载新的工作线程(根据我的理解,就是把css和js换个版本号,则会触发install的事件)
  2. waiting 等待更新动作被触发
  3. Activate 新的serviceworker替换老的
  4. skipWaiting 跳过waiting
  5. 手动更新
navigator.serviceWorker.register('/sw.js').then(reg => {
  // sometime later…
  reg.update();
});