0

I store some files on client side using Cache storage. These file names are stored in cached array. When I update these files on the server, I use clear HTTP parameter to clear the Cache storage and reload it from server. However, the browser cache also comes into play, so after calling the clear command, I also need to press Ctrl+F5 to bypass it. Then it works. However, it is hard to press Ctrl+F5 on mobile browsers. This is my code so far:

if('serviceWorker' in navigator) {
    if(location.href.indexOf("?clear")!=-1) {
        console.log("clearing");
        caches.open('store').then(cache => (
          cache.keys().then(keys =>
            keys.forEach(request =>
              cache.delete(request)
            )
          ),
          cache.addAll(cached)
        ));
    }
    navigator.serviceWorker
      .register('/sw.js')
      .then(_ => console.log('Service Worker Registered'));
}

I know there are HTTP headers Clear-Site-Data: cache and Cache-Control: no-store, but I am not sure which header affects which cache and which combination of the many settings should I use. I want to have a magic button to reliably reload all resources from server on clear command and to use Cache storage in other cases (i.e. to make the web accessible offline).

Jan Turoň
  • 26,696
  • 21
  • 102
  • 153

0 Answers0