React app: old version is stored in cache until I check it

Question

I used create-react-appto get started on the React app. By default, it uses service workers. I also serve my app with https.

It turned out that with this configuration, my browser simply does not receive the new versions that I am deploying. It continues to reload old versions, even if I force the update. The only way to download the latest version is to check the page (using Chrome). Then, when I force update, the last build is loaded.

I disabled the service worker because he seemed to be the culprit, but I continue to face this problem. I cannot ask my users to open inspectors in their browsers to get the latest build.

How to find out how to fix this problem? Can I reconfigure create-react-appto make sure this doesn't happen anymore?

Answer 1

I actually discovered what the problem was: it index.htmlwas cached, and therefore it was pointing to old js files that were also cached.

I solved this by adding this configuration to the file .htaccessin the root of the application (although configuring apache using other means may 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 not related to the attendant. This was only due to the way it index.htmlwas cached.

Answer 2

, , service-worker.js , . SW.js Expires: 0, Cache-Control: no-store, no-cache headers. , , -, CRA , .

Google post https://developers.google.com/web/fundamentals/primers/service-workers/

Answer 3

, nginx :

location / {
    add_header Cache-Control "private, no-store, no-cache"
}

JS CSS , html no-store, no-cache . , , html, Cache-Control.

Also make sure that you cache your static elements like .js, .css, .svg, but there should be a separate location rule anyway.