2

When I make a new build of a react app, a bundle with serial number is created and included in index.html (example: main.350fc2cb.chunk.js), the browser then cache this bundle and gets it from cache when requested.

When I make any changes and create a new bundle the index.html will have a new version so the browser will work fine because index.html is now requesting different file name.

The issue is that when I make new changes and replace the index.html on the server while the user is already opening the tab of the site, there is nothing to tell the browser to load the new bundle unless refresh -with no cache- is done.

Is there something that can be done so the app will know if there is new content and automatically request it, or at least tell the user to do so?

I am using .Net Core on the back-end side, so any solutions from back-end side is also fine.

I tried to use serviceWorker which is included in the create-react-app app to identify if there is new content available, but it doesn't seem to work unless I open a new tab or refresh the page, and even so refresh with no cache (CTRL + SHIFT + F5) is still needed to load the new bundle.

Majed Manasra
  • 21
  • 3
  • Maybe this will help? https://stackoverflow.com/a/38235096/5734311 –  May 13 '19 at 21:09
  • @ChrisG I don't want to cancel all browser cache, I would still want the bundle to be cached because its quite big, but I'm wondering if there is a way to detect new bundle while the tab is already open, and do auto refresh for the page. – Majed Manasra May 13 '19 at 21:13
  • You could add code to your index.html that regularly checks the current app version using a basic `fetch()` and reloads if there's a new one? –  May 13 '19 at 21:15

0 Answers0