[PWA] 9. Service worker registerion && service work's props, methods and listeners
In some rare cases, you need to ask user to refresh the browsser to update the version. Maybe because some secrity issues.
As we have learnt so far. And code change will generate a new service work in the waiting list. Unitl the current service worker completely die (hard refresh or close the window). Then the new service work will take control.
So what we want to do is when there is a new service work ready, we want to notify user that he or she need to refresh the browser to update the appliation version.
First, let's see what kinds of event listener and status service worker has.
Once we register the service worker, it will return a registerion object:
navigation.serviceWorker.register('/sw.js').then(function(reg) { // method reg.unregister(); reg.update(); // state /* Pointing to the serviceWorker object or be null */ reg.installing; // start installing new service worker, if install faild then throw away reg.waiting; // service worker is ready to take over reg.activate; // service worker is not take over control // has listener when update is found reg.addEventListener('updatefound', function(){ // reg.installing is changed }) })
API: Link
For the service worker itself:
var sw = reg.installing; console.log(sw.state); // ...logs "installing" // state can also be: // "installed" // "activating" // "avvtivated" // "redundant" sw.addEventListener('statechange', function(){ // sw.state has changed })
Aslo about:
naviagetor.serviceWorker.controller
"navigator.serviceWorker.controller" refer to the service worker that controls the page.
So if there is no controller, then it means the data is loading from network:
if(!navigator.serviceWorker.controller){ // page didn't load using a service worker but from network }
Otherwise we need to look for registration.
If there is a "waiting" worker:
if(reg.waiting){ // there is a update ready! Notify user }
Else If there is a "installing" worker:
if(reg.installing){ // there is an update in progress, but update may fail // So we still need to track state change // if it reached installed statue, then notify user reg.installing.addEventListener('statechange', function(){ if(this.state == "installed"){ // there is an update ready! } }) }
Otherwise, we listen 'updatefound', we track "installing" state until it reach "installed", then again we tell the user.
reg.addEventListener('updatefound', function(){ reg.installing.addEventListener('statechange', function(){ if(this.satate == "installed"){ // there is an update ready! } }) })
相关文章
- Not Only SQL (四) - MongoDB Introduce & CRUD (中)
- 六&七、工厂模式
- k8s创建pv&pvc
- Java Web(十二)Vue&Element
- 【一Go到底】第二天---你好,Go and GOROOT&GOPATH
- Garadle 插件扩展属性&源集SourceSets
- ACL2022 && 加利福尼亚大学 | 新意图发现(NID)/新意图挖掘 最近邻对比学习方法(源码)
- 7 Papers & Radios | ECCV 2022最佳论文;Transformer在试错中自主改进
- iOS 语言基础&初探 Xcode 工具
- R语言线性混合效应模型(固定效应&随机效应)和交互可视化3案例|附代码数据
- 精益产品开发 —— 精益软件开发 & 精益产品开发
- TCP & UDP
- Mac重装系统太麻烦?试试App Cleaner & Uninstaller 8轻松清理!
- 多条件查询MySQL中使用And多条件查询的步骤(mysql中and)
- 条件MySQL 子句之间`AND`操作符多条件查询(mysql多个and)
- Oracle数据库中的AND查询(oracle and查询)
- MySQL中AND的使用方法解析(mysql中and的用法)
- Mysql中强大的AND运算符的使用方法探究(mysql中and的使用)
- Oracle中使用AND运算符的示例分析(oracle中and用法)
- SQL中NTEXT字段内容显示<longtext>的原因