Service Worker 缓存文件处理

交代背景

前段时间升级了一波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。
更新流程
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();
});

转载于:https://www.cnblogs.com/jiajin/p/8586758.html