1

After uploading new files to my S3 bucket, the browser continues to load old files. I run S3 invalidations on all files in Cloudfront which sits in front of my S3 app.

If I have the browser open to my website, I need to refresh several times to see the updated files. I would think that renaming the Javascript file would help, however, the browser is somehow loading the old file probably due to browser cache.

If I clear my browser cache or open in incognito mode, I see the updates immediately. Obviously, I can't tell my users to clear their cache every time I make an update. Is there a solution to this? I often make changes to my API at the same time that the new front-end is dependent on. How can I be sure the newest files are loaded?

Details: I'm using create-react-app to bundle my S3 app together.

dcporter7
  • 535
  • 3
  • 14

3 Answers3

1

Set the cache-control header to max-age 0,no-cache,no-store,must-revalidate to disable caching

Please refer to this answer on how to set file headers

William Chong
  • 2,107
  • 13
  • 24
1

I discovered the issue. The problem arose due to my app using Service Workers. Create-React-App automatically enables this. If you want the browser to stop caching your React app, make sure to remove the line in index.js that registers service workers.

dcporter7
  • 535
  • 3
  • 14
  • In the new CRA, serviceWorker is disabled by default. So if anyone still have this issue, make sure to check your index.html file in s3 and set the `cache-control` value to `max-age=0` – Arga Aditya Sep 18 '19 at 09:41
  • @ArgaAditya, that is true. CRA now unregisters serviceWorker by default. – dcporter7 Sep 19 '19 at 22:35
1

Please refer to this answer this may help you.refer to this answer

Adding a variable Cache-Control to 0 in the header to the selected file in S3

enter image description here

banoth ravinder
  • 1,314
  • 15
  • 18