When using external js files, browsers can be forced to reload the files. See here.
Recently, I've found out that INLINE scripts are also cached, at least in Chrome, version 80.0.3987.132, example of snippet:
<html>
<head>
<script>alert("I am cached!");</script>
</head>
<body>
<script>alert("Me too!");</script>
</body>
</html>
What's the way of refreshing inline scripts?
Update 1: I do have to mention that the webserver returning the content is using HTTP 2.0
Update 2: A solution that works is to have an auxiliary script as base and when the page loads get the "real" script content through ajax or websocket then append it to head like so:
function addScript(content){
let s = document.createElement('script');
s.innerHTML = content;
document.head.appendChild(s);
}
This does the job but its not optimal as it needs more requests than necessary.
Update 3: Headers sent from backend neither seem to work, using these headers:
Header().Set("Cache-Control", "no-cache, no-store, must-revalidate") // HTTP 1.1.
Header().Set("Pragma", "no-cache") // HTTP 1.0.
Header().Set("Expires", "0") // Proxies.
Update 4: As per Jinxmcg's answer, the doc https://v8.dev/blog/code-caching-for-devs Don’t change URLs mentions:
we may one day decide to associate caches with the source text rather than source URL, and this advice will no longer be valid.
Probably that day has come and is also applied to inline scripts.
Thank you everyone for participating
Final Solution (works at least under my circumstances):
1 Backend headers:
w.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate, max-age=0") // HTTP 1.1.
w.Header().Set("Pragma", "no-cache") // HTTP 1.0.
w.Header().Set("Expires", "0") // Proxies.
2 Random string in HTML, JS and CSS, example:
<html>
<head>
<style>
--cache-color: #8528cc; //Random hex color generated by backend
</style>
<script>
console.log("<?php echo date(); ?>");
alert("I am cached!");
</script>
</head>
<body>
<div>Hidden DIV with a random value: <?php echo date(); ?></div>
<script>
console.log("<?php echo date(); ?>");
alert("Me too!");
</script>
</body>
</html>
I think the browser caches the inline javascript only when the page is opened for subsequent calls in that session and does not keep it after you close or refresh the page.
However, this means that the browser gets the HTML (including JS) from its cache in your case. Therefore you could try sending some headers along with your page that force the browser not to use it's cached HTML copy and use the new html+js.
In order to test if it is a HTML cache or "inline JS" cache issue, make your html dynamically change and confirm that it is changing on refresh but the inline JS execution does not.
You can find more details regarding js cache here: https://v8.dev/blog/code-caching-for-devs