re: Cache Busting a React App VIEW POST

re: 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...

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)))
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)));
Code of Conduct Report abuse