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 like this
<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" href="css/style.css">
Try changing that to:
<link rel="stylesheet" type="text/css" 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" href="css/style.css?ver=1.2">
The same principle applies to external javascript.
Additionally, you can control caching via the .htaccess
https://gist.github.com/hans2103/fca6f184df1c2c41b3dd
As Kavish Mittal has pointed out, this can be handled in the html document.
