loading...

re: Cache Busting a React App VIEW POST

FULL DISCUSSION
 

I think it should be noted the window.location.reload(true) will only disable the cache for the current page. Any subsequent requests (async js/css, other pages, images, etc.) will not be cache busted. It's also very dependant on the browser. Chrome for example hangs on to cache for dear life unless instructed by headers to do otherwise. The best way to ensure cache is busted is to fingerprint filenames based on the files content and to never cache pages (e.g. index) so references remain fresh.

 

James — That's very true. Browsers sometime decide to ignore window.location.reload(true).

But caches.delete() will always delete the cache. So reloading synchronously after cache.delete() should clear the cache for the user.

 

You mention reloading synchronously... I was having issues with infinite looping when our app updated and it seems due to window.location.reload firing before our caches had time to clear, in the code you shared for CacheBuster. Simply adding aPromise.all() on the caches.delete() promises solved the issue in our case.

Thank you for taking the time to share this!

Hi Matt,

We are facing the same issue, can you please let me know the exact code you have used to solve this issue?

Something like this? Please correct me if I am wrong.

caches.keys().then(async function(names) {
await Promise.all(names.map(name => caches.delete(name)));
});

Yep, I used promises but that's pretty much exactly what I did, then do the window.location.reload after your await

Thanks, I got it now.

Hi a-ssassi-n,
I'm having the same issue and I tried to do it the same way as this:
refreshCacheAndReload: () => {
if (caches) {
caches.keys().then(async function(names) {
await Promise.all(names.map(name => caches.delete(name)))
})
}
window.location.reload(true)
},
And it keeps happening did I miss something?, can you please give me any guide?

if (caches) {
  const names = await caches.keys();
  await Promise.all(names.map(name => caches.delete(name)));
}
window.location.reload();
Code of Conduct Report abuse