[PWA] 8.Unobtrusive update: Delete old cache and only keep one, hard refresh to let new SW to take control
to and New update cache One Control Only
2023-09-14 08:59:20 时间
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.
相关文章
- [Android] The connection to adb is down, and a severe error has occured
- Drag an item to dhtmlxGrid and add a column
- mongodb 修改数据类型 版本4.0 (string to int)
- [CSS3] Use media query to split css files and Dark mode (prefers-color-scheme: dark)
- [Svelte 3] Use Svelte 3 transitions to gracefully show and hide DOM elements
- [Angular] @ViewChild and template #refs to get Element Ref
- [AngualrJS NG-redux] Map State and Dispatchers to Redux
- [Immutable.js] Converting Immutable.js Structures to Javascript and other Immutable Types
- 网络号 = IP和子网掩码的每位数AND 主机号 掩码取反与IP地址and运算
- mysql中的日期转换函数(类似oracle中的to_date)
- Using platform encoding (GBK actually) to copy filtered resources, i.e. build is platform dependent!
- [Tool] Enable Prettier in VSCode as Format on Save and add config files to gitingore
- [AngualrJS NG-redux] Map State and Dispatchers to Redux
- [Angular 2] Using a Reducer to Change an Object's Property Inside an Array
- 异常:java.lang.RuntimeException: Canvas: trying to draw too large(161740800bytes) bitmap
- How to resolve error message CRM_PRODUCT_SALES-E016 during product download
- 【异常】IDEA中Maven插件提示异常Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin
- 已解决TypeError: descriptor ‘index‘ for ‘list‘ objects doesn‘t apply to a ‘str‘ object
- java.net.ConnectException: Call From slaver1/192.168.19.128 to slaver1:8020 failed on connection exception: java.net.ConnectException: Connection refused; For more details see: http://wiki.apache.org
- Qt开发,报错:This application failed to start because no Qt platform plugin could be initialized.
- SystemVerilog: What is and why to use pass-by-reference?
- 【Python问题解决】---- ERROR: Could not install packages due to an OSError: [WinError 2] 系统找不到指定的文件。