How to Clear Cache of Service Worker

How to clear cache of service worker?

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);
        })
      );
    })
  );
});

How to clear a Service Worker cache in Firefox?

As mentioned above, it is not possible right now. But deleting Cache entries and Caches has been implemented and should roll out soone (https://bugzilla.mozilla.org/show_bug.cgi?id=1304297). And it is already available in Firefox Developer Edition, for example.

Service Worker - how to know whether cache cleared?

You've commented out the section for /// Check the cache first and then below that the try/catch statement again pulls from the network and falls back to the cache.

Uncomment this section of code and see if you're loading from the cache first.

  // event.respondWith(
  //   caches.match(event.request).then(function (response) {
  //     return response || fetch(event.request).then(function (response) {
  //       return response;
  //     });
  //   })
  // );

Don't forget that even if you request from the network from the service worker the browser will still use it's own internal cache to serve data. How long the data stays in the browser's cache depends on the expiration headers being sent by the server.

When using expires, it's still a fairly common solution to do something like:

• index.html - expires after an hour. Has script/css tags that call out file names with ?v=x.y.z
• /resources - folder that holds js and css. This folder has a very long expiration time. But that long expiration is short circuited by changing the ?v=x.y.z in index.html

I've used the above successfully in Progressive Web Apps (PWAs). But it is a little painful when debugging. The best option here is to manually clear out the cache and service worker from Dev Tools \ Application, if you're in Chrome.

Service Worker updates, but old file is still cached

The problem is very simple: when your Service Worker requests the "new" files, that fetch request goes through the regular browser HTTP cache. If the resource is found there, browser automatically returns that and doesn't go to network.

If you look at this snippet from your code:

return cache.addAll([
                "/".
                "/stylesheet.css",
                ...
            ]);

you'll see that your stylesheet's name is always the same no matter the content. In other words, when your stylesheet updates, the filename is still the same. For this reason the file is already in the browser's HTTP cache and thus SW gets it when it asks for it.

You should version your files. Usually hash of the file contents is used. With hash naming you end up with names like stylesheet.iudfirio132.css and that name changes every time the file changes even one character. This way new version of your application always uses resources with different names. You should also have build tooling like Workbox precaching to update the resource list in your Service Worker file so that you don't need to do it manually. More: https://developers.google.com/web/tools/workbox/modules/workbox-precaching

To completely grasp the subject here I recommend you to read this blog post, "Caching best practices & max-age gotchas" https://jakearchibald.com/2016/caching-best-practices/

Clear Workbox cache of all content

CacheStorage is accessible in the client code (where you register the SW) so you can delete it from there.

caches.keys().then(cacheNames => {
  cacheNames.forEach(cacheName => {
    caches.delete(cacheName);
  });
});

---

Related Topics