<p>We are currently working in a private beta and so are still in the process of making fairly rapid changes, although obviously as usage is starting to ramp up, we will be slowing down this process.  That being said, one issue we are running into is that after we push out an update with new JavaScript files, the client browsers still use the cached version of the file and they do not see the update.  Obviously, on a support call, we can simply inform them to do a <kbd>ctrl</kbd><kbd>F5</kbd> refresh to ensure that they get the up-to-date files from the server, but it would be preferable to handle this before that time.</p>

<p>Our current thought is to simply attach a version number onto the name of the JavaScript files and then when changes are made, increment the version on the script and update all references.  This definitely gets the job done, but updating the references on each release could get cumbersome.</p>

<p>As I'm sure we're not the first ones to deal with this, I figured I would throw it out to the community.  How are you ensuring clients update their cache when you update your code?  If you're using the method described above, are you using a process that simplifies the change?</p>

[{'answer_id': 32427, 'author': 'Huppie', 'author_id': 1830, 'author_profile': 'https://Stackoverflow.com/users/1830', 'pm_score': 10, 'selected': True, 'text': '<p>As far as I know a common solution is to add a <code>?&lt;version&gt;</code> to the script\'s src link.</p>\n\n<p>For instance:</p>\n\n<pre><code>&lt;script type="text/javascript" src="myfile.js?1500"&gt;&lt;/script&gt;\n</code></pre>\n\n<hr>\n\n<blockquote>\n  <p>I assume at this point that there isn\'t a better way than find-replace to increment these "version numbers" in all of the script tags?</p>\n</blockquote>\n\n<p>You might have a version control system do that for you? Most version control systems have a way to automatically inject the revision number on check-in for instance.</p>\n\n<p>It would look something like this:</p>\n\n<pre><code>&lt;script type="text/javascript" src="myfile.js?$$REVISION$$"&gt;&lt;/script&gt;\n</code></pre>\n\n<hr>\n\n<p>Of course, there are always better solutions like <a href="http://blog.greenfelt.net/2009/09/01/caching-javascript-safely/" rel="noreferrer">this one</a>.</p>\n'}, {'answer_id': 32450, 'author': 'AdamB', 'author_id': 2176, 'author_profile': 'https://Stackoverflow.com/users/2176', 'pm_score': 2, 'selected': False, 'text': '<p>My colleague just found a reference to that method right after I posted (in reference to css) at <a href="http://www.stefanhayden.com/blog/2006/04/03/css-caching-hack/" rel="nofollow noreferrer">http://www.stefanhayden.com/blog/2006/04/03/css-caching-hack/</a>.  Good to see that others are using it and it seems to work.  I assume at this point that there isn\'t a better way than find-replace to increment these "version numbers" in all of the script tags?</p>\n'}, {'answer_id': 83853, 'author': 'Richard Turner', 'author_id': 12559, 'author_profile': 'https://Stackoverflow.com/users/12559', 'pm_score': 2, 'selected': False, 'text': "<p>One solution is to append a query string with a timestamp in it to the URL when fetching the resource. This takes advantage of the fact that a browser will not cache resources fetched from URLs with query strings in them.</p>\n\n<p>You probably don't want the browser not to cache these resources at all though; it's more likely that you want them cached, but you want the browser to fetch a new version of the file when it is made available.</p>\n\n<p>The most common solution seems to be to embed a timestamp or revision number in the file name itself. This is a little more work, because your code needs to be modified to request the correct files, but it means that, e.g. version 7 of your <code>snazzy_javascript_file.js</code> (i.e. <code>snazzy_javascript_file_7.js</code>) is cached on the browser until you release version 8, and then your code changes to fetch <code>snazzy_javascript_file_8.js</code> instead.</p>\n"}, {'answer_id': 84770, 'author': 'pcorcoran', 'author_id': 15992, 'author_profile': 'https://Stackoverflow.com/users/15992', 'pm_score': 0, 'selected': False, 'text': "<p>Simplest solution?  Don't let the browser cache at all.  Append the current time (in ms) as a query.</p>\n\n<p>(You are still in beta, so you could make a reasonable case for not optimizing for performance.  But YMMV here.)</p>\n"}, {'answer_id': 84835, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 3, 'selected': False, 'text': "<p>If you're generating the page that links to the JS files a simple solution is appending the file's last modification timestamp to the generated links. </p>\n\n<p>This is very similar to Huppie's answer, but works in version control systems without keyword substitution. It's also better than append the current time, since that would prevent caching even when the file didn't change at all.</p>\n"}, {'answer_id': 84846, 'author': 'Chase Seibert', 'author_id': 7679, 'author_profile': 'https://Stackoverflow.com/users/7679', 'pm_score': 7, 'selected': False, 'text': '<p>Appending the current time to the URL is indeed a common solution. However, you can also manage this at the web server level, if you want to. The server can be configured to send different HTTP headers for javascript files. </p>\n\n<p>For example, to force the file to be cached for no longer than 1 day, you would send:</p>\n\n<pre><code>Cache-Control: max-age=86400, must-revalidate\n</code></pre>\n\n<p>For beta, if you want to force the user to always get the latest, you would use:</p>\n\n<pre><code>Cache-Control: no-cache, must-revalidate\n</code></pre>\n'}, {'answer_id': 84871, 'author': 'Echo says Reinstate Monica', 'author_id': 13778, 'author_profile': 'https://Stackoverflow.com/users/13778', 'pm_score': 4, 'selected': False, 'text': "<p>Not all browsers cache files with <strong>'?'</strong> in it. What I did to make sure it was cached as much as possible, I included the version in the filename. </p>\n\n<p>So instead of <code>stuff.js?123</code>, I did <code>stuff_123.js</code> </p>\n\n<p>I used <code>mod_redirect</code>(I think) in apache to to <code>have stuff_*.js</code> to go <code>stuff.js</code></p>\n"}, {'answer_id': 857557, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 2, 'selected': False, 'text': '<p>The advantage of using a <code>file.js?V=1</code> over a <code>fileV1.js</code> is that you do not need to store multiple versions of the JavaScript files on the server.</p>\n\n<p>The trouble I see with <code>file.js?V=1</code> is that you may have dependant code in another JavaScript file that breaks when using the new version of the library utilities.</p>\n\n<p>For the sake of backwards compatibility, I think it is much better to use <code>jQuery.1.3.js</code> for your new pages and let existing pages use <code>jQuery.1.1.js</code>, until you are ready to upgrade the older pages, if necessary.</p>\n'}, {'answer_id': 4293901, 'author': 'Derek Adair', 'author_id': 231435, 'author_profile': 'https://Stackoverflow.com/users/231435', 'pm_score': 2, 'selected': False, 'text': '<p>Use a version <code>GET</code> variable to prevent browser caching.</p>\n\n<p>Appending <code>?v=AUTO_INCREMENT_VERSION</code> to the end of your url prevents browser caching - avoiding any and all cached scripts.</p>\n'}, {'answer_id': 7671705, 'author': 'Hắc Huyền Minh', 'author_id': 1020600, 'author_profile': 'https://Stackoverflow.com/users/1020600', 'pm_score': 6, 'selected': False, 'text': '<p>Google Page-Speed: Don\'t include a query string in the URL for static resources.\nMost proxies, most notably Squid up through version 3.0, do not cache resources with a "?" in their URL even if a Cache-control: public header is present in the response. To enable proxy caching for these resources, remove query strings from references to static resources, and instead encode the parameters into the file names themselves. </p>\n\n<p>In this case, you can include the version into URL ex: <a href="http://abc.com/">http://abc.com/</a><strong>v1.2</strong>/script.js and use apache mod_rewrite to redirect the link to <a href="http://abc.com/script.js">http://abc.com/script.js</a>. When you change the version, client browser will update the new file.</p>\n'}, {'answer_id': 12757339, 'author': 'Trent', 'author_id': 110226, 'author_profile': 'https://Stackoverflow.com/users/110226', 'pm_score': 2, 'selected': False, 'text': '<p>Athough it is framework specific, Django 1.4 has <a href="https://docs.djangoproject.com/en/dev/ref/contrib/staticfiles/#django.contrib.staticfiles.storage.CachedStaticFilesStorage" rel="nofollow noreferrer" title="this functionality">the staticfiles app functionality</a> which works in a similar fashion to the \'greenfelt\' site in the <a href="https://stackoverflow.com/a/32427/110226">above answer</a></p>\n'}, {'answer_id': 14672139, 'author': 'user1944129', 'author_id': 1944129, 'author_profile': 'https://Stackoverflow.com/users/1944129', 'pm_score': 3, 'selected': False, 'text': '<p>In <strong>PHP</strong>:</p>\n\n<pre><code>function latest_version($file_name){\n    echo $file_name."?".filemtime($_SERVER[\'DOCUMENT_ROOT\'] .$file_name);\n}\n</code></pre>\n\n<p>In <strong>HTML</strong>:</p>\n\n<pre><code>&lt;script type="text/javascript" src="&lt;?php latest_version(\'/a-o/javascript/almanacka.js\'); ?&gt;"&gt;&lt; /script&gt;\n</code></pre>\n\n<p><strong>How it works:</strong></p>\n\n<p>In HTML, write the <code>filepath</code> and name as you wold do, but in the function only.\nPHP gets the <code>filetime</code> of the file and returns the <code>filepath+name+"?"+time</code> of latest change </p>\n'}, {'answer_id': 18033575, 'author': 'Ivan Kochurkin', 'author_id': 1046374, 'author_profile': 'https://Stackoverflow.com/users/1046374', 'pm_score': 3, 'selected': False, 'text': '<p>For ASP.NET I suppose next solution with advanced options (debug/release mode, versions):</p>\n\n<p>Js or Css files included by such way:</p>\n\n<pre><code>&lt;script type="text/javascript" src="Scripts/exampleScript&lt;%=Global.JsPostfix%&gt;" /&gt;\n&lt;link rel="stylesheet" type="text/css" href="Css/exampleCss&lt;%=Global.CssPostfix%&gt;" /&gt;\n</code></pre>\n\n<p>Global.JsPostfix and Global.CssPostfix is calculated by the following way in Global.asax:</p>\n\n<pre><code>protected void Application_Start(object sender, EventArgs e)\n{\n    ...\n    string jsVersion = ConfigurationManager.AppSettings["JsVersion"];\n    bool updateEveryAppStart = Convert.ToBoolean(ConfigurationManager.AppSettings["UpdateJsEveryAppStart"]);\n    int buildNumber = System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.Revision;\n    JsPostfix = "";\n#if !DEBUG\n    JsPostfix += ".min";\n#endif      \n    JsPostfix += ".js?" + jsVersion + "_" + buildNumber;\n    if (updateEveryAppStart)\n    {\n        Random rand = new Random();\n        JsPosfix += "_" + rand.Next();\n    }\n    ...\n}\n</code></pre>\n'}, {'answer_id': 21297413, 'author': 'Ravi Ram', 'author_id': 665387, 'author_profile': 'https://Stackoverflow.com/users/665387', 'pm_score': 4, 'selected': False, 'text': '<p>For ASP.NET pages I am using the following</p>\n\n<p><strong>BEFORE</strong></p>\n\n<pre><code>&lt;script src="/Scripts/pages/common.js" type="text/javascript"&gt;&lt;/script&gt;\n</code></pre>\n\n<p><strong>AFTER (force reload)</strong></p>\n\n<pre><code>&lt;script src="/Scripts/pages/common.js?ver&lt;%=DateTime.Now.Ticks.ToString()%&gt;" type="text/javascript"&gt;&lt;/script&gt;\n</code></pre>\n\n<p>Adding the DateTime.Now.Ticks works very well.</p>\n'}, {'answer_id': 25316713, 'author': 'amos', 'author_id': 319034, 'author_profile': 'https://Stackoverflow.com/users/319034', 'pm_score': 5, 'selected': False, 'text': '<blockquote>\n  <p>This usage has been deprected:\n  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache</a></p>\n</blockquote>\n\n<p>This answer is only 6 years late, but I don\'t see this answer in many places... HTML5 has introduced <a href="http://www.w3schools.com/html/html5_app_cache.asp" rel="nofollow noreferrer" title="Application Cache">Application Cache</a> which is used to solve this problem. I was finding that new server code I was writing was crashing old javascript stored in people\'s browsers, so I wanted to find a way to expire their javascript. Use a manifest file that looks like this:</p>\n\n<pre><code>CACHE MANIFEST\n# Aug 14, 2014\n/mycode.js\n\nNETWORK:\n*\n</code></pre>\n\n<p>and generate this file with a new time stamp every time you want users to update their cache. As a side note, if you add this, the browser will <em>not</em> reload (even when a user refreshes the page) until the manifest tells it to.</p>\n'}, {'answer_id': 33058872, 'author': 'Michael Franz', 'author_id': 4479748, 'author_profile': 'https://Stackoverflow.com/users/4479748', 'pm_score': 2, 'selected': False, 'text': '<p>The jQuery function getScript can also be used to ensure that a js file is indeed loaded every time the page is loaded.</p>\n\n<p>This is how I did it:</p>\n\n<pre><code>$(document).ready(function(){\n    $.getScript("../data/playlist.js", function(data, textStatus, jqxhr){\n         startProgram();\n    });\n});\n</code></pre>\n\n<p>Check the function at <a href="http://api.jquery.com/jQuery.getScript/" rel="nofollow">http://api.jquery.com/jQuery.getScript/</a></p>\n\n<p>By default, $.getScript() sets the cache setting to false. This appends a timestamped query parameter to the request URL to ensure that the browser downloads the script each time it is requested.</p>\n'}, {'answer_id': 34032995, 'author': 'Erik Corona', 'author_id': 5531314, 'author_profile': 'https://Stackoverflow.com/users/5531314', 'pm_score': 5, 'selected': False, 'text': '<p>How about adding the filesize as a load parameter?</p>\n\n<pre><code>&lt;script type=\'text/javascript\' src=\'path/to/file/mylibrary.js?filever=&lt;?=filesize(\'path/to/file/mylibrary.js\')?&gt;\'&gt;&lt;/script&gt;\n</code></pre>\n\n<p>So every time you update the file the "filever" parameter changes.</p>\n\n<p>How about when you update the file and your update results in the same file size? what are the odds?</p>\n'}, {'answer_id': 41501905, 'author': 'Goran Siriev', 'author_id': 5917218, 'author_profile': 'https://Stackoverflow.com/users/5917218', 'pm_score': 1, 'selected': False, 'text': '<p>One simple way.\nEdit htaccess</p>\n\n<pre><code>RewriteEngine On\nRewriteBase /\nRewriteCond %{REQUEST_URI} \\.(jpe?g|bmp|png|gif|css|js|mp3|ogg)$ [NC]\nRewriteCond %{QUERY_STRING} !^(.+?&amp;v33|)v=33[^&amp;]*(?:&amp;(.*)|)$ [NC]\nRewriteRule ^ %{REQUEST_URI}?v=33 [R=301,L]\n</code></pre>\n'}, {'answer_id': 44835940, 'author': 'ccherwin', 'author_id': 3320423, 'author_profile': 'https://Stackoverflow.com/users/3320423', 'pm_score': 2, 'selected': False, 'text': '<p>Cache Busting in ASP.NET Core via a tag helper will handle this for you and allow your browser to keep cached scripts/css until the file changes. Simply add the tag helper asp-append-version="true" to your script (js) or link (css) tag:</p>\n\n<pre><code>&lt;link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true"/&gt;\n</code></pre>\n\n<p>Dave Paquette has a good example and explanation of cache busting here (bottom of page) <a href="http://www.davepaquette.com/archive/2015/05/06/link-and-script-tag-helpers-in-mvc6.aspx" rel="nofollow noreferrer">Cache Busting</a> </p>\n'}, {'answer_id': 47174803, 'author': 'Aman Singh', 'author_id': 2570255, 'author_profile': 'https://Stackoverflow.com/users/2570255', 'pm_score': 3, 'selected': False, 'text': '<p>We have been creating a SaaS for users and providing them a script to attach in their website page, and it was not possible to attach a version with the script as user will attach the script to their website for functionalities and i can\'t force them to change the version each time we update the script</p>\n\n<p>So, we found a way to load the newer version of the script each time user calls the original script</p>\n\n<p><em>the script link provided to user</em></p>\n\n<pre><code>&lt;script src="https://thesaasdomain.com/somejsfile.js" data-ut="user_token"&gt;&lt;/script&gt;\n</code></pre>\n\n<p><em>the script file</em></p>\n\n<pre><code>if($(\'script[src^="https://thesaasdomain.com/somejsfile.js?"]\').length !== 0) {\n   init();\n} else {\n   loadScript("https://thesaasdomain.com/somejsfile.js?" + guid());\n}\n\nvar loadscript = function(scriptURL) {\n   var head = document.getElementsByTagName(\'head\')[0];\n   var script = document.createElement(\'script\');\n   script.type = \'text/javascript\';\n   script.src = scriptURL;\n   head.appendChild(script);\n}\n\nvar guid = function() {\n    return \'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx\'.replace(/[xy]/g, function(c) {\n        var r = Math.random() * 16 | 0, v = c == \'x\' ? r : (r &amp; 0x3 | 0x8);\n        return v.toString(16);\n    });\n}\n\nvar init = function() {\n    // our main code\n}\n</code></pre>\n\n<p><strong>Explanation:</strong></p>\n\n<p>The user have attached the script provided to them in their website and we checked for the unique token attached with the script exists or not using jQuery selector and if not then load it dynamically with newer token (or version)</p>\n\n<p>This is call the same script twice which could be a performance issue, but it really solves the problem of forcing the script to not load from the cache without putting the version in the actual script link given to the user or client</p>\n\n<blockquote>\n  <p>Disclaimer: Do not use if performance is a big issue in your case.</p>\n</blockquote>\n'}, {'answer_id': 52535465, 'author': "schrodinger's code", 'author_id': 142372, 'author_profile': 'https://Stackoverflow.com/users/142372', 'pm_score': 4, 'selected': False, 'text': '<p>The common practice nowadays is to generate a content hash code as part of the file name to force the browser especially IE to reload the javascript files or css files. </p>\n\n<p>For example, </p>\n\n<p>vendor.<strong>a7561fb0e9a071baadb9</strong>.js<br>\nmain.<strong>b746e3eb72875af2caa9</strong>.js</p>\n\n<p>It is generally the job for the build tools such as webpack. Here is more <a href="https://webpack.js.org/guides/caching/#output-filenames" rel="noreferrer">details</a> if anyone wants to try out if you are using webpack.</p>\n'}, {'answer_id': 53721063, 'author': 'dragonal', 'author_id': 7376037, 'author_profile': 'https://Stackoverflow.com/users/7376037', 'pm_score': 2, 'selected': False, 'text': '<p>In asp.net mvc you can use <strong>@DateTime.UtcNow.ToString()</strong> for js file version number. Version number auto change with date and you force clients browser to refresh automatically js file. I using this method and this is work well.</p>\n\n<pre><code>&lt;script src="~/JsFilePath/JsFile.js?v=@DateTime.UtcNow.ToString()"&gt;&lt;/script&gt;\n</code></pre>\n'}, {'answer_id': 54941810, 'author': 'H.Ostwal', 'author_id': 7750626, 'author_profile': 'https://Stackoverflow.com/users/7750626', 'pm_score': 0, 'selected': False, 'text': '<p>Below worked for me: </p>\n\n<pre><code>&lt;head&gt;\n&lt;meta charset="UTF-8"&gt;\n&lt;meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" /&gt;\n&lt;meta http-equiv="cache-control" content="max-age=0" /&gt;\n&lt;meta http-equiv="expires" content="0" /&gt;\n&lt;meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /&gt;\n&lt;meta http-equiv="pragma" content="no-cache" /&gt;\n&lt;/head&gt;\n</code></pre>\n'}, {'answer_id': 58064317, 'author': 'Megan', 'author_id': 11364541, 'author_profile': 'https://Stackoverflow.com/users/11364541', 'pm_score': 2, 'selected': False, 'text': '<p>location.reload(true);</p>\n\n<p>see <a href="https://www.w3schools.com/jsref/met_loc_reload.asp" rel="nofollow noreferrer">https://www.w3schools.com/jsref/met_loc_reload.asp</a></p>\n\n<p>I dynamically call this line of code in order to ensure that javascript has been re-retrieved from the web server instead of from the browser\'s cache in order to escape this problem.</p>\n'}, {'answer_id': 62428811, 'author': 'Mohamad Hamouday', 'author_id': 4110122, 'author_profile': 'https://Stackoverflow.com/users/4110122', 'pm_score': 1, 'selected': False, 'text': '<p>You can add file version to your file name so it will be like:</p>\n\n<pre><code>https://www.example.com/script_fv25.js\n</code></pre>\n\n<p>fv25 => file version nr. 25</p>\n\n<p>And in your .htaccess put this block which will delete the version part from link:</p>\n\n<pre><code>RewriteEngine On\nRewriteRule (.*)_fv\\d+\\.(js|css|txt|jpe?g|png|svg|ico|gif) $1.$2 [L]\n</code></pre>\n\n<p>so the final link will be:</p>\n\n<pre><code>https://www.example.com/script.js\n</code></pre>\n'}, {'answer_id': 63309105, 'author': 'Luis Lobo', 'author_id': 11212275, 'author_profile': 'https://Stackoverflow.com/users/11212275', 'pm_score': 1, 'selected': False, 'text': "<p>FRONT-END OPTION</p>\n<p>I made this code <strong>specifically</strong> for those who can't change any settings on the backend. In this case the best way to prevent a very long cache is with:</p>\n<pre><code>new Date().getTime()\n</code></pre>\n<p>However, for most programmers the cache can be a few minutes or hours so the simple code above ends up forcing all users to download &quot;the each page browsed&quot;. To specify how long this item will remain without reloading I made this code and left several examples below:</p>\n<pre><code>// cache-expires-after.js v1\nfunction cacheExpiresAfter(delay = 1, prefix = '', suffix = '') { // seconds\n    let now = new Date().getTime().toString();\n    now = now.substring(now.length - 11, 10); // remove decades and milliseconds\n    now = parseInt(now / delay).toString();\n    return prefix + now + suffix;\n};\n\n// examples (of the delay argument):\n// the value changes every 1 second\nvar cache = cacheExpiresAfter(1);\n// see the sync\nsetInterval(function(){\n    console.log(cacheExpiresAfter(1), new Date().getSeconds() + 's');\n}, 1000);\n\n// the value changes every 1 minute\nvar cache = cacheExpiresAfter(60);\n// see the sync\nsetInterval(function(){\n    console.log(cacheExpiresAfter(60), new Date().getMinutes() + 'm:' + new Date().getSeconds() + 's');\n}, 1000);\n\n// the value changes every 5 minutes\nvar cache = cacheExpiresAfter(60 * 5); // OR 300\n\n// the value changes every 1 hour\nvar cache = cacheExpiresAfter(60 * 60); // OR 3600\n\n// the value changes every 3 hours\nvar cache = cacheExpiresAfter(60 * 60 * 3); // OR 10800\n\n// the value changes every 1 day\nvar cache = cacheExpiresAfter(60 * 60 * 24); // OR 86400\n\n// usage example:\nlet head = document.head || document.getElementsByTagName('head')[0];\nlet script = document.createElement('script');\nscript.setAttribute('src', '//unpkg.com/sweetalert@2.1.2/dist/sweetalert.min.js' + cacheExpiresAfter(60 * 5, '?'));\nhead.append(script);\n\n// this works?\nlet waitSwal = setInterval(function() {\n    if (window.swal) {\n        clearInterval(waitSwal);\n        swal('Script successfully injected', script.outerHTML);\n    };\n}, 100);\n</code></pre>\n"}, {'answer_id': 65130064, 'author': 'Hans-Peter Stricker', 'author_id': 363429, 'author_profile': 'https://Stackoverflow.com/users/363429', 'pm_score': -1, 'selected': False, 'text': '<p>A simple trick that works fine for me to prevent conflicts between older and newer javascript files. That means: If there is a conflict and some error occurs, the user will be prompted to press Ctrl-F5.</p>\n<p>At the top of the page add something like</p>\n<pre><code>&lt;h1 id=&quot;welcome&quot;&gt; Welcome to this page &lt;span style=&quot;color:red&quot;&gt;... press Ctrl-F5&lt;/span&gt;&lt;/h1&gt;\n</code></pre>\n<p>looking like</p>\n<p><a href="https://i.stack.imgur.com/yiqlQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yiqlQ.png" alt="enter image description here" /></a></p>\n<p>Let this line of javascript be the last to be executed when loading the page:</p>\n<pre><code>document.getElementById(&quot;welcome&quot;).innerHTML = &quot;Welcome to this page&quot;\n</code></pre>\n<p>In case that no error occurs the welcome greeting above will hardly be visible and almost immediately be replaced by</p>\n<p><a href="https://i.stack.imgur.com/IVakd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IVakd.png" alt="enter image description here" /></a></p>\n'}, {'answer_id': 66656955, 'author': 'Darshan Jain', 'author_id': 5840973, 'author_profile': 'https://Stackoverflow.com/users/5840973', 'pm_score': 0, 'selected': False, 'text': '<p>If you are using PHP and Javascript then the following should work for you especially in the situation where you are doing multiple times changes on the file. So, every time you cannot change its version. So, the idea is to create a random number in PHP and then assign it as a version of the JS file.</p>\n<pre><code>$fileVersion = rand();\n&lt;script src=&quot;addNewStudent.js?v=&lt;?php echo $fileVersion; ?&gt;&quot;&gt;&lt;/script&gt;\n</code></pre>\n'}, {'answer_id': 73223699, 'author': 'Ingo', 'author_id': 2278668, 'author_profile': 'https://Stackoverflow.com/users/2278668', 'pm_score': -1, 'selected': False, 'text': '<p>You can do this with .htaccess</p>\n<p>Add into your .htaccess file the following lines:</p>\n<pre><code># DISABLE CACHING\n&lt;IfModule mod_headers.c&gt;\n  &lt;FilesMatch &quot;\\.js$&quot;&gt;\n      Header set Cache-Control &quot;no-store, max-age=0&quot;\n  &lt;/FilesMatch&gt;\n&lt;/IfModule&gt;\n</code></pre>\n'}, {'answer_id': 73327865, 'author': 'Reggie Pinkham', 'author_id': 2927114, 'author_profile': 'https://Stackoverflow.com/users/2927114', 'pm_score': 0, 'selected': False, 'text': "<pre><code>&lt;script&gt;  \n  var version = new Date().getTime();  \n  var script = document.createElement(&quot;script&quot;);  \n  script.src = &quot;app.js?=&quot; + version;  \n  document.body.appendChild(script);  \n&lt;/script&gt;\n</code></pre>\n<p>Feel free to delete this if someone's already posted it somewhere in the plethora of answers above.</p>\n"}]
['https://Stackoverflow.com/questions/32414', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2176/']