[PWA] 10. Trigger a version update
When the refersh button is clicked, we need to tell the waiting service worker to replace the current service worker right away. Then we refresh the page load the latest cache from the new cache db.
There are three new components to help:
Service worker can all skipwaiting() while it is "waiting" or "installing".
self.skipWaiting()
Then the waiting service worker should take over right away.
So we want to call it function when user click refresh button in the notification.
Then how can we send the signal from our page to waiting servcie worker?
// from a page:
reg.installing.postMessage({foo: 'bar'}); // in the service worker:
self.addEventListener('message', function(event){
event.data; // {foo: 'bar'}
})
The page gets event when the value chanages, means a new service worker take over, we will use this as a signal to reload our page:
navigator.serviceWorker.addEventListener('controllerchange', function(){
// navigator.serviceWorker.controller has changed
})
--------------------------------------------------------
Our page: send single to service worker ask it to reload:
IndexController.prototype._updateReady = function(worker) {
var toast = this._toastsView.show("New version available", {
buttons: ['refresh', 'dismiss']
}); toast.answer.then(function(answer) {
if (answer != 'refresh'){
// tell the service worker to skipWaiting
worker.postMessage({message: 'skipWaiting'})
} });
};
Service worker: listen to the message event and call skilWaiting():
// TODO: listen for the "message" event, and call
// skipWaiting if you get the appropriate message
self.addEventListener('message', function(event){
if(event.data.message == "skipWaiting"){
self.skipWaiting();
}
})
The on our page, listen to controllerchange event, insdie load the page:
IndexController.prototype._registerServiceWorker = function() {
if (!navigator.serviceWorker) return; var indexController = this; navigator.serviceWorker.register('/sw.js').then(function(reg) {
if (!navigator.serviceWorker.controller) {
return;
} if (reg.waiting) {
indexController._updateReady(reg.waiting);
return;
} if (reg.installing) {
indexController._trackInstalling(reg.installing);
return;
} reg.addEventListener('updatefound', function() {
indexController._trackInstalling(reg.installing);
}); // TODO: listen for the controlling service worker changing
// and reload the page
navigator.serviceWorker.addEventListener('controllerchange', function(){
window.location.reload();
})
});
};
[PWA] 10. Trigger a version update的更多相关文章
- APPLE-SA-2019-3-25-2 macOS Mojave 10.14.4,Security Update 2019-002 High Sierra, Security Update 2019-002 Sierra
APPLE-SA-2019-3-25-2 macOS Mojave 10.14.4, Security Update2019-002 High Sierra, Security Update 2019 ...
- 项目中使用了个quartz包,启动时提示Quartz version update check failed
<span style="font-family: Arial, Helvetica, sans-serif;">2015-09-13 00:12:02 Abstrac ...
- Windows10+Android Studio 3.5编译项目报错——NDK Resolution Outcome: Project settings: Gradle model version=4.10.1, NDK version is UNKNOWN
项目背景: 系统有C.D两个盘,Android Studio安装在D盘,sdk安装在C盘. 出现的问题: 从git拉取项目后,一直编译不通过,提示“NDK Resolution Outcome: Pr ...
- windows 10 无法启动 windows update 服务 错误 0x80070005 拒绝访问
windows 10 无法启动 windows update 服务 错误 0x80070005 拒绝访问: 解决方法: 首先重命名系统盘 windows目录下的代号为“SoftwareDistribu ...
- Ubuntu Intel显卡驱动安装 (Ubuntu 14.04--Ubuntu 16.10 + Intel® Graphics Update Tool)
最近使用在使用Ubuntu时,发现大部分情况下,不安装显卡驱动,使用默认驱动,都是没有问题的,但对于一些比较奇特配置的电脑,如下所示,如果使用默认驱动,会时常莫名其妙死机crash,尤其是在使用Ope ...
- Resolve Error While Windows 10 Updating Cross Multiple Updating Versions (Such as Error 0x800f0831 when Update KB4556799) | 解决跨多个更新版本升级Windows 10时遭遇错误的问题(如 KB4556799 / 错误0x800f0831)
Upgrade memory size for a laptop recently, the OS on the laptop was Windows 10 with a version of 201 ...
- MySQL - 问题集 - 触发器更新本表数据异常"Can’t update table ‘tbl’ in stored function/trigger because it is already used by statement which invoked this"
如果你在触发器里面对刚刚插入的数据进行了 insert/update, 则出现这个问题.因为会造成循环的调用. create trigger test before update on test fo ...
- MySQL触发器更新本表数据异常:Can't update table 'tbl' in stored function/trigger because it
MySQL触发器更新本表数据异常:Can't update table 'tbl' in stored function/trigger because it 博客分类: 数据库 MySQLJava ...
- pt-online-schema-change中update触发器的bug
pt-online-schema-change在对表进行表结构变更时,会创建三个触发器. 如下文测试案例中的t2表,表结构如下: mysql> show create table t2\G . ...
随机推荐
- filter过滤器执行顺序
浏览器请求---->进入过滤器---->进入doFilter方法--->执行chain.doFilter()方法就会放行----->进入业务逻辑方法------>进入过滤 ...
- 寒假挑战PythonTip(一人一python)总结——算法是程序的灵魂,程序员的心法
2014年2月中旬,我上升到挑战python英雄榜第3名.这是我寒假修炼算法的成果之一.来一下总结吧! Linux的创始人Linus Torvalds在一次演讲中有一段涉及“什么才是优秀程序员 ...
- Html5-Canvas实现简易的抽奖转盘
###Html5实现抽奖转盘效果 1.实现的基本效果 2.主要的内容 html5中canvas标签的使用 jQueryRotate.js旋转插件 3.主要html代码 <body> < ...
- Socket原理
一.Socket简介 Socket是进程通讯的一种方式,即调用这个网络库的一些API函数实现分布在不同主机的相关进程之间的数据交换. 几个定义: (1)IP地址:即依照TCP/IP协议分配给本地主机的 ...
- MySql数据库1【概念】
[mysql] mysql是目前最主流的跨平台.开放源代码的关系型数据库,由瑞曲的mysql ab公司开发,已经被SUN公司收购,标识是一只名为sakila的海豚,代表mysql的速度.能力.精确优秀 ...
- 面试小结(java基础)
一个.java源文件中可以有多个类吗?(内部类除外)有什么条件?带着这个疑惑,动手建几个测试类, 揭开心中的疑惑.以下是解开疑惑过程: package test;/** * 一个.java源文件中可以 ...
- 最好用的手机编程软件-C4droid
Q:c4droid是什么? A:c4droid(以下简称c4)是安卓平台上最强大的c/c++ 编译器,你可以在手机上用手机编写自己的C/C++程序,并且可以把程序导出成apk文件. 下载地址:http ...
- [Codeforces Round#286] A.Mr. Kitayuta, the Treasure Hunter 【Normal DP..】
题目链接:CF#286 - A 这场CF就这样爆零了...我真是太蒟蒻了... 题目分析 比赛的时候看到A题就发现不会,之后一直也没想出来,于是就弃了,还好不提交也不掉Rating... 比赛后看评论 ...
- Unity NGUI 网络斗地主 -制作图集 Atlas
Unity NGUI 网络斗地主 -制作图集 Atlas by @杨海龙 开发环境 Win7+Unity4.2.1f4+NGUI 3.0.4版本 这一节告诉大家如何制作(图集)Atlas! 1.首 ...
- android小文章——手机照片上传服务器方法
手机上传:http://blog.csdn.net/bitter_2014/article/details/40618587