React app : old version kept in cache until I inspect it

Question

I used create-react-app to start working on a React app. By default, it uses service workers. I also happen to serve my production app with https.

It turns out that with this config, my browser just doesn't get new versions I deploy. It keeps on reloading old versions, even if I force a refresh. The only way I can get it to load the latest build is by inspecting the page (with Chrome). Then, when I force-refresh, the latest build is loaded.

I have disabled the service worker as it seemed to be the culprit, but I keep on bumping into this problem. I can't ask my users to each open the inspector in their browsers in order to get the latest build.

How can I find out how to fix this problem? Is there a create-react-app config I could change in order to make sure this does not happen anymore?

Answer 1

I've actually found what the problem was: the index.html was cached, and so it was pointing to old js files which were also cached.

The way I solved it was to add this config to an .htaccess file at the root of the app (although configuring apache through other means might also work):

<FilesMatch "\.(html)$">
  FileETag None
  <IfModule mod_headers.c>
     Header unset ETag
     Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
     Header set Pragma "no-cache"
     Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
  </IfModule>
</FilesMatch>

In the end, it was unrelated to the service worker. It only had to do with the way index.html was cached.