how to clear browser cache in reactjs

Question

every time I make changes to my website and try to update those changes to the running website, I've to hard refresh browser. is there any way to do it by code

i already try to search it but most of saying it can not be done. referance post : How to programmatically empty browser cache?

**Response headers :

HTTP/1.1 200 OK
Server: nginx/1.12.2
Date: Fri, 06 Jul 2018 10:01:23 GMT
Content-Type: text/html
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept-Encoding
Content-Encoding: gzip

**Request headers :

GET / HTTP/1.1
Host: --example--.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8,hi;q=0.7
Cookie: fingerPrint=e4a9037b8f674722f414b0b59d8d663c

By `running website`, do you mean your production website? If so, it would probably be a good idea to have some [cache busting](https://webpack.js.org/guides/caching/) filenames. — Tholle, Jul 06 '18 at 09:50
Yes you can by call a ajax page give you the last page lenght if it change will refresh automaticlly — HamzaNig, Jul 06 '18 at 09:50
Created a component where can handle build updates into your application. You can check here: https://www.npmjs.com/package/react-clear-cache — Noah John Ucab, Jun 26 '19 at 06:53

Mustkeem K · Answer 1 · 2020-11-19T10:37:39.367

20

For this specific case what you can do is to tell browser to not to cache your page, by using these meta tags inside <head> tag:

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

However there are multiple ways to achieve this. You could send the appropriate headers with your resource from your back end. Or if you are trying to disable cache temporally you can do it by disabling the browser cache. To do so, Follow below steps.

In your developer tools. Find network tab and disable cache. Like here in the image.

Hope this resolves.

edited Nov 19 '20 at 10:37

answered Jul 06 '18 at 10:31

Mustkeem K

5,524
1
24
38

2

OP is asking to do it by code, of course he's asking this for the end-user – pmiranda Oct 10 '19 at 20:14
1

thanks @pmiranda I made some edits. Hopes this answer fits the op question. – Mustkeem K Oct 11 '19 at 14:49

score 3 · Answer 2 · answered Nov 04 '20 at 14:14

I made a simple function to remove the cache. Just call this function when you want to clear the cache.

It works for me. *Did not tested it on edge cases.

You can implement it by keeping a version number at the client and let the server send a version number. If they don't match, call the function to remove the cache. Or you can give a button to the user and let them decide to remove the cache.

export default function emptyCache(){
    if('caches' in window){
    caches.keys().then((names) => {
            // Delete all the cache files
            names.forEach(name => {
                caches.delete(name);
            })
        });

        // Makes sure the page reloads. Changes are only visible after you refresh.
        window.location.reload(true);
    }
}

score 2 · Answer 3 · answered Sep 19 '19 at 06:25

Make a style.css file in your public folder then link this CSS file in your index.html file.

Ex:

 <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/style.css?v=0.0.1" />

Always update the version of this CSS fils before doing build your code.

score 0 · Answer 4 · answered Jul 06 '18 at 09:49

0

It's possible, you can simply use jQuery. please take a look at the post How to programmatically empty browser cache?

answered Jul 06 '18 at 09:49

Joseph Stalin

140
9

Created a component where can handle build updates into your application. You can check here: https://www.npmjs.com/package/react-clear-cache – Noah John Ucab Jun 26 '19 at 06:53

Thanmai C · Answer 5 · 2018-09-18T03:51:58.447

0

Even if the below answers didn't work. And you are facing a problem something like your app being cached, making the whole app display an old build then probably you can check this link https://github.com/facebook/create-react-app/issues/1910#issuecomment-355245212. After that do an npm start, it worked for me.

edited Sep 18 '18 at 03:51

answered Sep 17 '18 at 15:57

Thanmai C

641
1
7
10

This suggests to unregister service workers, so it only applies for PWA. – ana boies May 26 '21 at 06:07

how to clear browser cache in reactjs

5 Answers5

Linked