3

I have a react application and each time a new version is deployed, some users don't get the new version due the browser cache.

Anyone can tell me how to clean the browser cache each time a new version of the software is deployed?

Ricardo Rocha
  • 14,612
  • 20
  • 74
  • 130
recruintment
  • 65
  • 3
  • 13
  • You can't programatically clear the browser cache using JavaScript. However, there are other options. For example, to force the browser to refetch a script or css file, a common technique is to append a hash of the file or a version number to the end of the link. For instance, `` On the back end you can use HTTP headers to instruct the browser to not cache a response. – Kei Sep 18 '19 at 13:24
  • Check this out for an example: https://github.com/flexdinesh/cache-busting-example Here is the article with explanation: https://dev.to/flexdinesh/cache-busting-a-react-app-22lk – nircraft Sep 18 '19 at 13:52

1 Answers1

4

The cache is a functionality provided by the browser to users. Because of security reasons, you can not clean the cache using javascript.

Cleaning cache means you can manipulate physical files from the users' computer and it is a huge security breach if one day you be possible to do that.

Check this answer to reinforce what I'm saying.

However, you can tell the browser to never cache your page like this (check this documentation as well):

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

Or change the files known by the browser by associating a hash tag name in all your files (javascript, images, fonts, ...) and change that hash each time you deploy a new version of your software like this:

<script src="script.js?version={versionNumber}">
<img src ="imageName.png=version={versionNumber}">
Ricardo Rocha
  • 14,612
  • 20
  • 74
  • 130