title: How to refresh client INLINE javascript
body: <p>When using external js files, browsers can be forced to reload the files. See <a href="https://stackoverflow.com/questions/32414/how-can-i-force-clients-to-refresh-javascript-files">here</a>. </p>
  
  <p>Recently, I've found out that INLINE scripts are also cached, at least in Chrome, version 80.0.3987.132, 
  example of snippet:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script&gt;alert("I am cached!");&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;script&gt;alert("Me too!");&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What's the way of refreshing inline scripts?</p>
  
  <hr>
  
  <p>Update 1: I do have to mention that the webserver returning the content is using HTTP 2.0 </p>
  
  <p>Update 2: <strong>A solution that works</strong> 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: </p>
  
  <pre><code>function addScript(content){
      let s = document.createElement('script');
      s.innerHTML = content;
      document.head.appendChild(s);
  }
  </code></pre>
  
  <p>This does the job but its not optimal as it needs more requests than necessary. </p>
  
  <p>Update 3: Headers sent from backend neither seem to work, using these headers:</p>
  
  <pre><code>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.
  </code></pre>
  
  <p>Update 4: As per Jinxmcg's answer, the doc <a href="https://v8.dev/blog/code-caching-for-devs" rel="nofollow noreferrer">https://v8.dev/blog/code-caching-for-devs</a> <code>Don’t change URLs</code> mentions:</p>
  
  <blockquote>
    <p>we may one day decide to associate caches with the source text rather than source URL, and this advice will no longer be valid.</p>
  </blockquote>
  
  <p>Probably that day has come and is also applied to inline scripts. </p>
  
  <hr>
  
  <p><strong><em>Thank you everyone for participating</em></strong></p>
  
  <p><strong>Final Solution (works at least under my circumstances):</strong></p>
  
  <p>1 Backend headers:</p>
  
  <pre><code>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.
  </code></pre>
  
  <p>2 Random string in HTML, JS and CSS, example:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              --cache-color: #8528cc; //Random hex color generated by backend
          &lt;/style&gt;
          &lt;script&gt;
              console.log("&lt;?php echo date(); ?&gt;");
              alert("I am cached!");
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div&gt;Hidden DIV with a random value: &lt;?php echo date(); ?&gt;&lt;/div&gt;
          &lt;script&gt;
              console.log("&lt;?php echo date(); ?&gt;");
              alert("Me too!");
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>