3

Essentially, if I upload new files to S3 (via drag-and-drop), my website should be up to date on visit, not cached as the previous version. Right now the behavior is possibly inconsistent. iOS generally doesn't update on refresh, while Chrome and Firefox might update properly on refresh. The ideal scenario is that iOS, Android, Chrome, Safari, Firefox, Edge should all update on the next visit or next refresh (if website is already open).

I have been reading about cache busting a while now, but I haven't encountered an easily understandable solution to display the updated S3 static website for React.

As I understood it, yarn build already automatically generates new file names:

{
  "main.js": "static/js/main.72dbb977.js",
  "main.js.map": "static/js/main.72dbb977.js.map",
  "static/js/0.d70486e8.chunk.js": "static/js/0.d70486e8.chunk.js",
  "static/js/0.d70486e8.chunk.js.map": "static/js/0.d70486e8.chunk.js.map"
}

Because the names are new and different, the new version should be loaded and there should be no issue with cache. But this is not the case.

I saw a few solution involve the default registerServiceWorker for create-react-app. Removing it or unregistering it might be the solution, but what if having a Service Worker is desirable? It's good to have the pages and assets cached, except only when I upload an update.

Versioning might be an alternative, but I want to avoid manual updates and I am not 100% sure how it'll work cleanly with react yet.

Dan
  • 2,455
  • 3
  • 19
  • 53
  • 1
    IIRC, the index.html itself does not have a hash in the name and it might cause loading the js/css files with the older hash in the names. You might want to play with setting a shorter TTL for the index.html (CloudFront will still check if the content is updated and only fetch the full file if it is), so you are not transferring the index file all the time. https://stackoverflow.com/a/10622078/2231632 to see if this helps. – Praba Jun 26 '18 at 08:35
  • Before reading more about the `service-worker.js`, I tried to `no-cache` the `index.html`. That did not work. I haven't thoroughly tested this, but `no-cache` the `service-worker.js` should work instead since it handles clients side caching. Each file has a corresponding hash, including the `index.html`. So when `service-worker.js` is updated, the hash will be checked on visit, and the correct page would be fetched from cache, or from S3. – Dan Jun 26 '18 at 16:18
  • @usama Now I cache bust through cloudfront. It'll take a bit to propagate, but it works. Do it through the CLI or the console. – Dan Nov 12 '19 at 17:16
  • can you please explain it more how can I do it through CLI or the console...? – Muhammad Usama Mashkoor Nov 12 '19 at 18:12
  • 1
    @usama I don't have access to the console right now, but this document shows how to invalidate cache for cloudfront: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html – Dan Nov 12 '19 at 18:44

0 Answers0