Created by: Enselic
If using CloudFront you should not cache index.html. Otherwise an old index.html might get populated in the cache for a new service-worker.js. That does not get recovered until a new service-worker.js is deployed.
Step-by-step:
- create-react-app sw-cache-problems ; cd sw-cache-problems
- npm run build
- mv build cloud-front-simulation
- perl -pi -e 's/To get started/BANANA/g' src/App.js
- npm run build
- serve -s cloud-front-simulation/ # And keep it running while continuing below
- Go to http://localhost:5000 in e.g. Google Chrome and observe 'To get started' appearing on the page
- Close the browser
- mv build/service-worker.js cloud-front-simulation/service-worker.js # We wait with index.html, pretending it is still cached in CloudFront
- cp -r build/static cloud-front-simulation/
- Go to http://localhost:5000 again
- You will notice in Console "New content available; please refresh" so do that. However, you still get the old index.html of course
- Close the browser
- mv build/index.html cloud-front-simulation/index.html # To simulate CloudFront cache experied and it fetched the new version
- Go to http://localhost:5000 again
- If you press F5 you get the old site (with 'To get started'). If you press Shift+F5 you get the new site (with 'BANANA') since you bypass SW . That's because the sw cache was populated while index.html was still old. And now we're stuck like this until a new service-worker.js is deployed