title: How to really clear cache in PWA
body: <p>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).</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/brOrP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/brOrP.jpg" alt="enter image description here"></a></p>
  
  <p>The following is the part of service-worker.js with "activate" event and the const with cache name.</p>
  
  <pre><code>const name_of_cache = ['cache_v1'];
  self.addEventListener('activate', event =&gt; {
  console.log('Service worker activate event!');
  event.waitUntil(
  caches.keys().then((cacheNames) =&gt; {
    return Promise.all(
      cacheNames.map((cacheKeyName) =&gt; {
        if(name_of_cache.indexOf(cacheKeyName) === -1) {
          return caches.delete(cacheKeyName);
        }
      }
    ));
  })
  );
  });
  </code></pre>
  
  <p>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?</p>