CODEWITHSUNDEEP
reactjscreate-react-app
Brad Woods
Brad Woods

Reputation: 1546

deployed react web app requires hard refresh

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.

Upvotes: 16

Views: 8792

Answers (3)

Rajat Choudhary
Rajat Choudhary

Reputation: 1

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();
 }
};

Upvotes: 0

Mathew Leland
Mathew Leland

Reputation: 9

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.

Upvotes: 0

Brad Woods
Brad Woods

Reputation: 1546

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.

Upvotes: 3

Related Questions