deployed react web app requires hard refresh

Question

Bootstrapped with create-react-app (v1.0.13). Whenever I update the source & redeploy users need to hard refresh to get the new content. I've included non-cache header in index.html:

<meta http-equiv="Cache-Control" content="no-store" />

& turned off provided service workers. Also change the .js filename (and reference in index.html) in build folder before deploying.

Damicke

Disable caching or use a chunkhash so a changed file will have a new name – Uriia

github.com/facebookincubator/create-react-app/issues/2328 – Uriia

that's not a solution, just a link that goes to another link that goes deep into webpack which is something create-react-app helps to avoid. – Damicke

It is not an answer, only a comment that it is currently not implemented. And a link to an issue with an article how to use chunkhashs with webpack. – Uriia

create-react-app does change the .js file name every time you make a build. The link you provided is just talking about making the filenames follow correct versioning. Not relevant to the problem. – Damicke

ok, but if every file (except .html) has a different name after it is changed there should be no problem with caching these files – Uriia

I agree, that's why I posted this question. – Damicke

I ran into a similar issue, and this answer was the most helpful: https://mcmap.net/q/821189/-firebase-hosting-how-to-prevent-caching-for-the-index-html-of-an-spa – Apache

Answer 1

I was able to remove caching by doing the following:

• adding the following to in index.html <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" />
• inserting the following to the js import { unregister } from './registerServiceWorker'; unregister()
• changing cloudflare caching expiration to 'respect existing headers' at https://www.cloudflare.com/a/caching/

It is unclear which of these (or all of these) are actually required but it's a start.

Damicke

Answer 2

For anyone coming in the future -- all you need is the

{unregister} from ./registerServiceWorker

unregister();

This helped my create-react-app work with hosts like gh-pages and netlify.

Devilment

Hi Mathew, where did you place these line of code in order to make this work? – Huey

What syntax is ths? – Yezd

Javascript, and index.js – Hysell

where to put this script? – Brunswick

Answer 3

Instead removing the cache, you can implement a version update notification feature to inform users about new app versions and guide them to refresh their browsers. Use broadcast channel to implement that:

make the below change in your serviceWorkerRegistration.js file:
const broadcastChannel = new BroadcastChannel("new-content-channel");
broadcastChannel.postMessage({
  type: "newContentAvailable",
});

Listens to messages from the broadcast channel to any of your react page.

Listens to messages from the broadcast channel.
const broadcastChannel = new BroadcastChannel("new-content-channel");
broadcastChannel.onmessage = (event) => {
 if (event.data && event.data.type === "newContentAvailable") {
 DoSomething();
 }
};

Doorkeeper