This question already has an answer here:
Cache busting via params
How to control web page caching, across all browsers?
when we make any change in the HTML file or the java script file, sometimes the UI does not reflect those changes by simple refresh, and we need to clear browser cookies/history for the changes to reflect.
I was wondering whether there exist any option using which browser cookies/history be cleared via code. Would that be a good practice.
There is no article i found which explains the best practices in Single Page Application
It happens due to cache issues. Add below lines in your HTML’s tag and see if issue is resolved.
<meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" />
Refresh with shortcut key “Shift+F5”
or load scripts with query string with random value
<script src="~/Scripts/scriptFile.js?[random value]"></script>
Shift + F5 or Ctr + F5 = Reloads your current page, ignoring cached content
One way to accomplish what you want to see ( I think… ) is to add a url param to the paths the assets are loaded from.
For example, if you are loading a css file:
<link rel=”stylesheet” type=”text/css” target=”_blank” rel=”nofollow” href=”css/style.css”>
Try changing that to:
<link rel=”stylesheet” type=”text/css” target=”_blank” rel=”nofollow” href=”css/style.css?ver=1.1″>
Whenever you update the stylesheet, to force browsers to reload the stylesheet, instead of using the copy cached in the browser, change the url-parameter:
<link rel=”stylesheet” type=”text/css” target=”_blank” rel=”nofollow” href=”css/style.css?ver=1.2″>
Additionally, you can control caching via the .htaccess
As Kavish Mittal has pointed out, this can be handled in the html document.