Discussion on: Cache Busting a React App

View post

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.

Dinesh Pandiyan • Apr 15 '19 • Edited

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.

Matt • Jul 23 '19

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!

a-ssassi-n • Jan 8 '20 • Edited

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

Matt • Jan 10 '20

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

a-ssassi-n • Jan 14 '20

Thanks, I got it now.

Laura6739 • Jun 4 '20 • Edited

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?

Lukas Vis • Oct 12 '20

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