Force web to reload script or manifest.json after new build

[stefensuhat]

First I'm sorry to post this in here. I really need to take care this issue. Because the web app is live.
I already post on SO, and Facebook Group but still can't get any solution.

I'm currently experiencing every time I build script for production , the browser won't load any new JS.

The only way to make it work is clear cache manually (not all user know how to do this).

I've tried to put window.location.reload(true) but it still won't fetch latest JS.

and then I try to put this on my index.html

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

none of them is working.

The browser won't load any new JS especially for mobile (Chrome Android, Firefox. Again I need to clear data manually so the web reload the new version)
I'm using Cloudflare and I already try to purge cache few times.

I can't use JS versioning because create-react-app using manifest.json file.

Any other solution to force the browser load new script?

Thanks

Environment

1. node -v: 8.8.1
2. npm -v: 5.5.1
3. yarn --version (if you use Yarn): 1.2.1
4. npm ls react-scripts (if you haven’t ejected): 1.0.14

Then, specify:

1. Operating system: Windows 10
2. Browser and version (if relevant): Chrome (web), Chrome and Firefox ( Android)

[piotr-cz]

Probably your server is set up to cache all javascript files, including service worker itself for long period.
If you want to update your application in quicker pace than 24h (browsers built-in limit to look for changes in service worker), you should disable it's caching or set to some shorter time frame.

Steps

• disable caching of service worker on server (ie. on apache using htaccess file)
• deploy your app
• wait for 24h until change propagates to all users (browsers will fetch new service worker file and new application)

BTW: You'll get more relevant replies on SO, not here

More info here: vuejs-templates/pwa#70 or here

[gaearon]

Please see this section: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app

In particular, this point:

If possible, configure your production environment to serve the generated service-worker.js with HTTP caching disabled. If that's not possible—GitHub Pages, for instance, does not allow you to change the default 10 minute HTTP cache lifetime—then be aware that if you visit your production site, and then revisit again before service-worker.js has expired from your HTTP cache, you'll continue to get the previously cached assets from the service worker. If you have an immediate need to view your updated production deployment, performing a shift-refresh will temporarily disable the service worker and retrieve all assets from the network.

If this is still causing you trouble you can disable caching completely:

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#opting-out-of-caching

Also paging @jeffposnick to help explaining.

[jeffposnick]

Right—the guidance at https://stackoverflow.com/questions/38843970/service-worker-javascript-update-frequency-every-24-hours/38854905#38854905 and elsewhere is still relevant.

The good news is that Firefox 57+ defaults to ignoring the Cache-Control HTTP headers when determining whether to fetch service-worker.js. The bad news is that Chrome has not yet made that change, so it remains an ongoing issue.