[PWA] 8. Delete old cache and only keep one

So once you modify the code, service worker would auto create a new one and it won ' t take control over until the previous S Ervice Work Total die (close the tab or NAV to a new URL). The new service is in the waiting list.

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

So the-the-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.

varStaticcachename ='wittr-demo-v13'; Self.addeventlistener ('Install', Function (Event) {  varUrlstocache = [    '/',    '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 nameCaches.keys (). Then (function (cachenames) {//wait all cache deleted            returnPromise.all (//filter out staticcachename (only keep Staticcachename)Cachenames.filter (function (name) {returnName.startswith ('wittr') && Name! =Staticcachename; }). map (function (name) {//Delete cache, return promise                    returncaches.delete (name); })            )        })    )})

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

We Use the APIs:

// return a promise with all the cache name  //  return a promise and delete the selected cache

Now only V13 are left.

[PWA] 8. Delete old cache and only keep one