小樱 发表于 2020/1/7 01:21

Google 谷歌Chrome新版(ServiceWorker) 缓存,ctrl+f5也刷不掉的浏览器强制缓存,该如何清理

该处为转载
交代背景
前段时间升级了一波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();
});

清理方式,打开
chrome://inspect/#service-workers

找到要清理的域名,点击 terminate 进行清理

通过该方法还是发现无法清理
进行上面的清理操作后同时使用 chrome://settings/clearBrowserData ,依旧无法清理

目前临时绕过缓存的方法是bypass for network
就是F12切换application里面的选项勾上可以访问时候临时绕过ServiceWorker,但是取消勾选后还会用以前老旧的ServiceWorker缓存

已知单个网站清理ServiceWorker方法是点击clear site data按钮,一样在application里面,注意清理后该网站cookie等资料会全部丢失,需要重新登录

网上找的这些方法也没用。
chrome://serviceworker-internals/

不可名 发表于 2020/1/7 02:18

有新版本了???我快看
页: [1]
查看完整版本: Google 谷歌Chrome新版(ServiceWorker) 缓存,ctrl+f5也刷不掉的浏览器强制缓存,该如何清理