seriviceWorker 小结

serviceWorker 的状态 install → activate。

1.初进页面,此前未加载过serviceWorker,直接进入install状态,随后进入activate状态,但是此时serviceWorker并不会接管页面,可以使用clients.claim()方法  使serviceWorker直接接管页面。

2.再次进入页面,重新下载sw.js文件,与已存在的serviceWorker的sw.js文件比对

(1)sw.js文件有变化,此时安装一个新的serviceWorker,安装完成后,进入Waiting状态,不会接管页面,因为只能同时存在一个serviceWorker,只有当重新打开此页面或刷新页面,新的servicWorker才会激活,替换旧的servicWorker接管页面。(注意:所有此控制域下的tab页面,只要一个tab页面还在serviceWorker控制域下,旧的serviceWorker就不会被替换)

(2)sw.js文件没有变化,serviceWorker继续运行,掌控页面。

3.待验证:serviceWorker控制域下的页面更换会重载serviceWorker。比如:在/index.html下点击跳转至/detail/index.html(已验证,只要重载控制域下的html页面,都会重载serviceWorker)

参考资料 :https://segmentfault.com/a/1190000007487049#articleHeader11

https://blog.csdn.net/VhWfR2u02Q/article/details/84801178#commentBox

pwa参考文章

原文地址:https://www.cnblogs.com/iroading/p/10477996.html