Cache busting with create react app

Question

When I updated my site, run npm run build and upload the new files to the server I am still looking the old version of my site. The repo of my project is https://github.com/Alfrex92/serverlessapps

Without React, I can see the new version of my site with cache busting. I do this:

Previous file

<link rel="stylesheet" href="/css/styles.css">

New file

<link rel="stylesheet" href="/css/styles.css?abcde">

How can I do something like this or to achieve cache busting with create react app?

There many threads in the github of create react app about this but no one has a proper/simple answer.

Answer 1

This is probably because of your web worker.

If you look into your index.js file you can see

registerServiceWorker();

Never wondered what it did? If we take a look at the file it got imported from we can see

// In production, we register a service worker to serve assets from local cache.

// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.

// To learn more about the benefits of this model, read {URL}
// This link also includes instructions on opting out of this behavior.

If you want to delete the web worker, don't just delete the line. Import unregister and call it in your file instead of the register.

import { unregister } from './registerServiceWorker';

and tell call

unregister()

P.S. When you unregister, it will take at least one refresh to make it work

EDIT: create-react-app v2 now have the service worker disabled by default

Answer 2

I had the same issue when I use create-react-app ( and deploy to heroku). It keeps showing the old version of my app

查看更多

0人赞 添加讨论(0) 举报

Answer 3

It appears that they changed from opt-out to opt-in with regards to the service worker. Here's the commit that changed the README and it has examples similar to Kerry G's answer:

https://github.com/facebook/create-react-app/commit/1b2813144b3b0e731d8f404a8169e6fa5916dde4#diff-4e6ec56f74ee42069aac401a4fe448ad