How to purge browse cache - index.html stuck in cache

Question

I have a ReactJS app hosted in S3 and using Cloudflare as DNS & CDN.

I have a huge issue, a lot of visitors have old version of the application stored in their browser cache (index.html only). I have configured advanced cache control in the newest version, but it cannot be accessed because older version is shown instead.

Static file (CSS, JS) versioning is done using create-react-app , but I have discovered that index.html file is the only cached one .

What should I do now?
How to purge visitors cache now?

PS: I have purged Cloudflare cache already and setup rule to bypass cache.

Answer 1

A better approach would be, whenever your build changes, change the JS link so that the browser downloads the new version from the server, no matter the user's or the server's caching policy.

For example, the way Stack Exchange does it is, whenever the build changes, the HTML goes from something like:

<script src="https://cdn.sstatic.net/Js/stub.en.js?v=1bac371ac78f"></script>

to

<script src="https://cdn.sstatic.net/Js/stub.en.js?v=f83b2f654"></script>

Whenever there's a new build, you can randomize the parameter in the query string in the HTML, and still only have the single (most recent) built .js on your server.

Answer 2

Unfortunately there is no such solution for this.

The only way is to wait until users cache will empty (expire).

It is technicaly impossible to clear users cache from external resource (JS script etc.), due to security reasons.

Also if it will be possible, there is no way how to tell users to download latest JS (including cache purging code), because they have old version of index.html (including link to those.js files).

You are stack and the only option is to wait.