How To Clear Browser Cache In Reactjs

August 31, 2022 Post a Comment

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 sea

Solution 1:

For this specific case what you can do is to tell the browser not to cache your page, by using below meta tags inside <head> tag: This is temporary solution and for permanent solution, you should handle this using appropriate headers sent by your API/backend.

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

To handle this using API/backend, you should send the appropriate headers with your resource from your back end. And again if you are trying to disable cache temporally you can do it by disabling 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.

Headers for caching: https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching

Solution 2:

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.

Solution 3:

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

Solution 4:

Best solution that worked for me is to clear my local storage alongside with the local cache as @Wiezalditzijn suggested

I created a function that is called the first thing in “componentDidMount”.

This function checks if there is a local saved version and if it’s equivalent to the current one; thus, if they weren’t the same, it clears all local cache and saves the new version.

import packageJson from “../package.json”;

caching= ()=> {
let version = localStorage.getItem('version');
    if(version!=packageJson.version)
    {
        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);
}

      localStorage.clear();
      localStorage.setItem('version',packageJson.version);
    }
};

Solution 5:

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

JavaScript Lib