I'm trying to debug a issue about a PWA. I use Google Chrome to daily run the webapp and also to debug this problem (both desktop and tablet).

When I edit service-worker.js (changing the cache storage name to get out an update), the webapp doesn't reload all files fetching them from the server, but a part of them are always cached, also if in Cache Storage the name of cache (only 1, so no multiple cache) is the right. The same thing if I use different devices (Mac and Android tablet), so I believe is not a browser problem of a specific device. The strange thing is that if I use the "Clear site data" button to empty the cache, cookies, indexeddb, etc when I reload the page, the service-worker.js install the cache (with updated name) but if I go inside the detailed view there are some files with "Time Cached" too old, before I've cleared cache and site data.

For example, in the following picture you can see different time for some files. Consider that I used "Clear site data" button at 12/6/2020 19:17:50.

The following is the part of service-worker.js with "activate" event and the const with cache name.

const name_of_cache = ['cache_v1'];
self.addEventListener('activate', event => {
console.log('Service worker activate event!');
event.waitUntil(
caches.keys().then((cacheNames) => {
  return Promise.all(
    cacheNames.map((cacheKeyName) => {
      if(name_of_cache.indexOf(cacheKeyName) === -1) {
        return caches.delete(cacheKeyName);
      }
    }
  ));
})
);
});

Where am I doing wrong? How can I solve this issue, clearing the cache and all files every time I change service-worker.js and the name of the cache?

I'm trying to debug a issue about a PWA. I use Google Chrome to daily run the webapp and also to debug this problem (both desktop and tablet).

When I edit service-worker.js (changing the cache storage name to get out an update), the webapp doesn't reload all files fetching them from the server, but a part of them are always cached, also if in Cache Storage the name of cache (only 1, so no multiple cache) is the right. The same thing if I use different devices (Mac and Android tablet), so I believe is not a browser problem of a specific device. The strange thing is that if I use the "Clear site data" button to empty the cache, cookies, indexeddb, etc when I reload the page, the service-worker.js install the cache (with updated name) but if I go inside the detailed view there are some files with "Time Cached" too old, before I've cleared cache and site data.

For example, in the following picture you can see different time for some files. Consider that I used "Clear site data" button at 12/6/2020 19:17:50.

The following is the part of service-worker.js with "activate" event and the const with cache name.

const name_of_cache = ['cache_v1'];
self.addEventListener('activate', event => {
console.log('Service worker activate event!');
event.waitUntil(
caches.keys().then((cacheNames) => {
  return Promise.all(
    cacheNames.map((cacheKeyName) => {
      if(name_of_cache.indexOf(cacheKeyName) === -1) {
        return caches.delete(cacheKeyName);
      }
    }
  ));
})
);
});

Where am I doing wrong? How can I solve this issue, clearing the cache and all files every time I change service-worker.js and the name of the cache?

• javascript
• progressive-web-apps
• service-worker

• 1 I have this exact problem. Has anyone came up with a solution? – Nekomajin42 Commented Aug 13, 2024 at 21:37

1 Answer 1

This answer is based in this Gist: https://gist.github./deanhume/4b7e1f136cbee288cff9f0fc46318fbb

if ('serviceWorker' in navigator) {
  caches.keys().then(function(cacheNames) {
    cacheNames.forEach(function(cacheName) {
      caches.delete(cacheName);
    });
  });
}

This will loop through each cache you have and delete it.