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).