1

We have an application built on onReactJS and is deployed using S3 and CloudFront. We constantly get into the issue with clients where they are required to do hard refresh of the web app in order to get the latest SPA application.

To fix this issue I came across following article.

Append reload notice on create-react-app & registerServiceWorker.js

The approach in this article successfully raises an event called 'newContentAvailable' on all three browser i.e. FF, Chrome and Safari. When this event is raised the logic attempts to reload the updated version using window.location.reload(true). This updates FF and Safari successfully but Chromes still get the older version.

I have tried to used a different approach for reloading in Chrome but no luck. I came across the following code when searching about this issue

$.ajax({
    url: window.location.href,
    headers: {
        "Pragma": "no-cache",
        "Expires": -1,
        "Cache-Control": "no-cache"
    }
}).done(function () {
    window.location.reload(true);
});

I am not sure what I am doing wrong here. Please help.

Irfan Zulfiqar
  • 2,029
  • 5
  • 16
  • 21

1 Answers1

0

There are two different kinds of files to deploy:

  • Common files, such as index.html, which should not be cached by the browser
  • Build files with hash keys, e.g. 18.a7e57db0.chunk.js, which can be safely cached because changes to your source will produce new build files

To set the caching HTTP headers, you can use the AWS S3 CLI tools or other API tools such as python boto3. Normally you would want the browser to reload the common files with every call to reload, but avoid any unnecessary traffic for files that will not change (i.e. files with hash keys).

I built a python program that will take care of this automatically with the upload to S3. It sets the HTTP cache header parameters according to the file type, removes old files, and optionally maintains older versions.

Also see: Steps to deploy a React app on S3 with CloudFront while managing caching?

CharlieH
  • 1,432
  • 2
  • 12
  • 19