So once you modify the code, service worker will auto create a new one and it won't take control over until the previous service work total die(close the tab or nav to a new url). The new service work is in the waiting list.

Now what we want to do is delete the old caches and only keep the one which is latest installed.

So the way to do this, is in 'activate' state. So once anything changed, a new service worker is created and push into the waiting list. Then we want to delete old caches only keep the static one.

var staticCacheName = 'wittr-demo-v13';

self.addEventListener('install', function(event) {
var urlsToCache = [
'/',
'js/main.js',
'css/main.css',
'imgs/icon.png',
'https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff',
'https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff'
]; event.waitUntil(
caches.open(staticCacheName).then( (cache) => {
cache.addAll(urlsToCache);
})
);
}); self.addEventListener('activate', function(event){
event.waitUntil(
// Get all the cache name
caches.keys().then(function(cacheNames){
// wait all cache deleted
return Promise.all(
// filter out staticCacheName (only keep staticCacheName)
cacheNames.filter( function(name){
return name.startsWith('wittr') && name != staticCacheName;
}).map(function(name){
// delete cache, return promise
return caches.delete(name);
})
)
})
)
})

So in the code, the static one is 'wittr-demo-v13'.

We use two apis:

caches.keys() // return a promise with all the cache name

caches.delete(name) // return a promise and delete the selected cache

Now only v13 is left.

[PWA] 8.Unobtrusive update: Delete old cache and only keep one, hard refresh to let new SW to take control的更多相关文章

  1. 关于MyBatis mapper的insert, update, delete返回值

    这里做了比较清晰的解释: http://mybatis.github.io/mybatis-3/java-api.html SqlSession As mentioned above, the Sql ...

  2. PHP5: mysqli 插入, 查询, 更新和删除 Insert Update Delete Using mysqli (CRUD)

    原文: PHP5: mysqli 插入, 查询, 更新和删除  Insert Update Delete Using mysqli (CRUD) PHP 5 及以上版本建议使用以下方式连接 MySQL ...

  3. 如何判断一条sql(update,delete)语句是否执行成功

    如何判断一条sql(update,delete)语句是否执行成功 catch  (SQLException    e)  {  }  catch不到错误应该就成功了.   ============== ...

  4. ECSHOP后台SQL查询提示错误 this sql May contain UPDATE,DELETE,TRUNCATE,ALTER,DROP,FLUSH,INSERT

    一).首先说一下错误现象:市面上流行的绝大部分ECSHOP模板,安装的时候都需要执行一段或几段SQL语句来修改数据结构或者初始化一些数据.大多数ECSHOP管理员为了省事,都会通过 “ECSHOP后台 ...

  5. mysql 防止update/delete误操作

    身为一php开发攻城狮,常常涉及在应用中写update/delete语句,忘记加where,后果不堪设想. 还会出现在cml下直接操作mysql的情况,如果mysql 权限够大,一个update/de ...

  6. mysql 事务是专门用来管理insert,update,delete语句的,和select语句一点不相干

    1.mysql 事务是专门用来管理insert,update,delete语句的,和select语句一点不相干 2.一般来说,事务是必须满足4个条件(ACID): Atomicity(原子性).Con ...

  7. [Hive - LanguageManual] DML: Load, Insert, Update, Delete

    LanguageManual DML Hive Data Manipulation Language Hive Data Manipulation Language Loading files int ...

  8. AngularJS Tabular Data with Edit/Update/Delete

    效果 首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据 var app = angular.module('plunker', ['ui.bootstrap']); app.control ...

  9. MySQL 误删数据、误更新数据(update,delete忘加where条件)

    MySQL 误操作后数据恢复(update,delete忘加where条件) 关键词:mysql误删数据,mysql误更新数据 转自:https://www.cnblogs.com/gomysql/p ...

随机推荐

  1. 赋值,copy和deepcopy

    python的复制,拷贝,和深拷贝. >>> a=[23,3]>>> b=a>>> b.append(234)>>> a[23, ...

  2. 用css3实现鼠标移进去当前亮其他变灰

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. 【技术宅6】把一个无限级分类循环成tree结构

    function list_to_tree($list,$root=0,$pk='cid',$pid = 'pid',$child = '_child'){ if(is_array($list)) { ...

  4. 理解CSS Clip属性及用法

    应用Clip属性实现的一个简单效果图: 样式写法: .my-element { position: absolute; clip: rect(10px  350px  170px  0); /* IE ...

  5. QBImagePickerController 用法

    // // ViewController.m // QBImagePickerControllerDemo // // Created by Tanaka Katsuma on 2013/12/30. ...

  6. MAC 开发工具

    web开发编辑器 Espresso下载地址   密码: i9hr

  7. shuffle机制和TextInputFormat分片和读取分片数据(九)

    shuffle机制 1:每个map有一个环形内存缓冲区,用于存储任务的输出.默认大小100MB(io.sort.mb属性),一旦达到阀值0.8(io.sort.spill.percent),一个后台线 ...

  8. Recovery和Charger模式下屏幕旋转180度[转]

    如何让Recovery (系统固件升级),charger(关机充电动画)时屏幕旋转180度 解决方法: 1.在bootable\recovery\minui\Graphics.c 文件找到gr_fli ...

  9. 解决maven仓库有jar包但是maven程序无法下载仓库jar包

    话说,这个问题困扰了我两个多月了已经~~~ 后来发现不知道被谁动了,把我的仓库没有放到仓库组里面~~~ 用admin登录进去,默认密码是admin123,然后看截图操作吧. (记得删除你本地报错说** ...

  10. 通过PHP连接MYSQL数据库 创建数据库 创建表

    通过PHP连接MYSQL数据库  $conn = mysql_connect("localhost","root","password") ...