How to clear cache of service worker?

Question

So, I have an HTML page with service worker, the service worker cache the index.html and my JS files.

The problem is when I change the JS, the change doesn't show up directly on the client browser. Of course in chrome dev-tools, I can disable cache. But in chrome mobile, how do I do that?

I tried to access the site settings and hit the CLEAR % RESET button. But it still loads the old page/load from cache. I tried to use other browser or chrome incognito and it loads the new page.

Then, I try to clear my browsing data (just cache) and it works.

I guess that's not how it should work right? my user won't know if the page is updated without clearing the chrome browser cache.

Thanks very much Hashbrown. I use this way to update my application with custom check system I was explain in this page: https://stackoverflow.com/questions/56972246/how-to-update-reactjs-based-pwa-to-the-new-version/56984209#56984209 — Abbas Habibnejad, Dec 01 '19 at 08:43

Hashbrown · Answer 1 · 2018-05-30T02:05:22.717

122

If you know the cache name you can simply call caches.delete() from anywhere you like in the worker:

caches.delete(/*name*/);

And if you wanted to wipe all caches (and not wait for them, say this is a background task) you only need to add this:

caches.keys().then(function(names) {
    for (let name of names)
        caches.delete(name);
});

edited May 30 '18 at 02:05

answered Oct 06 '17 at 03:03

Hashbrown

12,091
8
72
95

2

Thanks for this. It is a lot simpler a clearer. I just wrote mine up quickly to answer the question – liam Oct 08 '17 at 18:06
2

Nah no worries. Yours would be perfect if someone wanted to delete a specific set of caches within the `activate` listener; I just did this in case someone only wanted to dump one/everything – Hashbrown Oct 08 '17 at 23:04
4

The most compact code is probably `caches.keys().then(cs=>cs.forEach(c=>caches.delete(c)))` or for async functions `(await caches.keys()).forEach(c=>caches.delete(c))` – Pat Mächler Oct 26 '17 at 12:03
where I live, You Mr. will be regarded a Mustache ! ( a compliment ) – Khaledonia Jan 04 '18 at 13:58
1

Note! You should check if `caches` exists. If you want to clear caches outside of the Service Worker check add something like `if (!window.caches) return;`. Also not that `caches` object might not exist on HTTP (e.g. in Chrome). – Nux Apr 20 '18 at 15:00
@Hashbrown - Is there a way to accomplish this using Workbox's GenerateSW()? For my purposes, reseting all caches on publish of a new service worker would be ideal. – Adam Youngers May 01 '21 at 19:05

score 45 · Accepted Answer · answered Aug 02 '17 at 19:00

45

Use this to delete outdated caches:

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheName) {
          // Return true if you want to remove this cache,
          // but remember that caches are shared across
          // the whole origin
        }).map(function(cacheName) {
          return caches.delete(cacheName);
        })
      );
    })
  );
});

answered Aug 02 '17 at 19:00

liam

1,918
3
22
28

6

What is `self` here? The window object or a serviceworker? – loopmode Sep 15 '17 at 09:12
62

It's good practice on Stack Overflow to add an explanation as to why your solution should work. For more information read [How To Answer](//stackoverflow.com/help/how-to-answer). – Samuel Liew Oct 03 '17 at 03:53
3

self means serviceWorker instance. :) – Sunjoong Kevin Kim Apr 02 '18 at 07:54
3

self is a "SharedWorkerGlobalScope" object. – foxesque May 28 '18 at 18:19
1

Using 'this' instead of 'self' can do the same same thing. But there's a difference between these two keywords. – Evading Shadows Apr 03 '20 at 04:10
How would one accomplish this using GenerateSW()? For my purposes, reseting all caches on publish of a new service worker would be ideal. – Adam Youngers May 01 '21 at 19:02
Works like a charm... Now when closing my web app and opening it again it's updated. Thank you so much! – Avi Nov 10 '22 at 19:43

vhs · Answer 3 · 2020-08-19T10:52:47.050

16

Typically you update the CACHE_NAME in your service workers JS file so your worker installs again:

self.addEventListener('install', evt => {
  evt.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(inputs))
  )
})

Alternatively, to clear the cache for a PWA find the cache name:

self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })

then run the following to delete it:

self.caches.delete('my-site-cache')

Then refresh the page.

If you see any worker-related errors in the console after refreshing, you may also need to unregister the registered workers:

navigator.serviceWorker.getRegistrations()
  .then(registrations => {
    registrations.forEach(registration => {
      registration.unregister()
    }) 
  })

edited Aug 19 '20 at 10:52

answered Aug 14 '18 at 16:09

vhs

9,316
3
66
70

1

last code: "navigator.serviceWorker....." helped me after removing superpwa wordpress plugin, to delete all cache related to service worker. Thanks – Vitalij Mar 17 '20 at 07:57
1

Are the descriptive words above your code blocks 2 and 3 swapped? – David Aug 16 '20 at 17:57
1

Thanks, David. Fixed with your help. – vhs Aug 19 '20 at 10:53
Yes! It's not good enough to delete the service worker, you have to also unregister it! Yay! – Phillip Senn Dec 19 '22 at 19:09

Esteban Ortega · Answer 4 · 2021-03-17T23:12:25.840

7

The most elegant solution, with async/await:

const cacheName = 'v2';

self.addEventListener('activate', event => {
// Remove old caches
  event.waitUntil(
    (async () => {
      const keys = await caches.keys();
      return keys.map(async (cache) => {
        if(cache !== cacheName) {
          console.log('Service Worker: Removing old cache: '+cache);
          return await caches.delete(cache);
        }
      })
    })()
  )
})

edited Mar 17 '21 at 23:12

answered Mar 17 '21 at 22:39

Esteban Ortega

155
1
8

The service worker is installed in your browser. Your browser will request your remote worker every time (if online) and update its locally installed version for offline use. You can see which files get cached by printing it to console, i.e. console.log('Caching:', event.request.url) in your 'fetch' event after cache.put() – Esteban Ortega Apr 27 '21 at 17:57

score 1 · Answer 5 · answered Mar 10 '19 at 14:16

1

This is the only code that worked for me. It is my adaptation of Mozilla documentation :

//Delete all caches and keep only one
const cachNameToKeep = 'myCache';

//Deletion should only occur at the activate event
self.addEventListener('activate', event => {
    var cacheKeeplist = [cacheName];
    event.waitUntil(
        caches.keys().then( keyList => {
            return Promise.all(keyList.map( key => {
                if (cacheKeeplist.indexOf(key) === -1) {
                    return caches.delete(key);
                }
            }));
        })
.then(self.clients.claim())); //this line is important in some contexts
});

answered Mar 10 '19 at 14:16

Shadi Alnamrouti

11,796
4
56
54

4

`cacheNameToKeep` ?? `[cacheName]` ?? Are those both the same thing? What does `self.clients.claim()` do? – zipzit Oct 31 '19 at 17:51
After activation, the service worker will now control pages, but only those that were opened after the register() is successful. In other words, documents will have to be reloaded to actually be controlled, because a document starts life with or without a service worker and maintains that for its lifetime. To override this default behavior and adopt open pages, a service worker can call `self.clients.claim()` – Emeka Augustine Jul 19 '23 at 08:06

score 0 · Answer 6 · answered Apr 02 '23 at 21:18

I was so disperate until I decided to change the code in devtools directly.
This may not clear the cache and replace the file, but at least, it will let you debug the code until you find the perfect way to do that.
Another notice is that closing browser entirly and reopeing your page may help, but this is still a bad practice for debugging!

How to clear cache of service worker?

6 Answers6

Linked

Related