<p>I've run into a problem where I make changes to a few JavaScript files that are referenced in an HTML file, but the browser doesn't see the changes. It holds onto the copy cached in the browser, even though the web server has a newer version.</p>

<p>Not until I force the browser to clear the cache do I see the changes.</p>

<p>Is this a web-server configuration? Do I need to set my JavaScript files to never cache? I've seen some interesting techniques in the <a href="http://code.google.com/docreader/#p=google-web-toolkit-doc-1-5&amp;s=google-web-toolkit-doc-1-5&amp;t=FAQ_GWTApplicationFiles" rel="noreferrer">Google Web Toolkit</a> where they actually create a <strong>new</strong> JavaScript file name any time an update is made. I believe this is to prevent proxies and browsers from keeping old versions of the JavaScript files with the same names.</p>

<p>Is there a list of best practices somewhere?</p>

[{'answer_id': 54483, 'author': 'UnkwnTech', 'author_id': 115, 'author_profile': 'https://Stackoverflow.com/users/115', 'pm_score': 0, 'selected': False, 'text': '<p>I am also of the method of just renaming things.   It never fails, and is fairly easy to do.</p>\n'}, {'answer_id': 54486, 'author': 'Jason Cohen', 'author_id': 4926, 'author_profile': 'https://Stackoverflow.com/users/4926', 'pm_score': 6, 'selected': True, 'text': '<p>We append a product build number to the end of all Javascript (and CSS etc.) like so:</p>\n\n<pre><code>&lt;script src="MyScript.js?4.0.8243"&gt;\n</code></pre>\n\n<p>Browsers ignore everything after the question mark but upgrades cause a new URL which means cache-reload.</p>\n\n<p>This has the additional benefit that you can set HTTP headers that mean "never cache!"</p>\n'}, {'answer_id': 54490, 'author': 'Darren Kopp', 'author_id': 77, 'author_profile': 'https://Stackoverflow.com/users/77', 'pm_score': 0, 'selected': False, 'text': "<p>is your webserver sending the right headers to tell the browser it has a new version? I've also added the date to the querystring before. ie myscripts.js?date=4/14/2008 12:45:03 (only the date would be encoded)</p>\n"}, {'answer_id': 54506, 'author': 'Chris Marasti-Georg', 'author_id': 96, 'author_profile': 'https://Stackoverflow.com/users/96', 'pm_score': 3, 'selected': False, 'text': '<p>@Jason and Darren</p>\n\n<p><strike>IE6</strike> treats anything with a query string as uncacheable. You should find another way to get the version number into the url, such as a fake directory:</p>\n\n<pre><code>&lt;script src="/js/version/MyScript.js"/&gt;\n</code></pre>\n\n<p>and just remove that first directory level after js on the server side before fulfilling the request.</p>\n\n<p>EDIT:  Sorry all; it is Squid, not IE6, that won\'t cache with a query string.  More info <a href="http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/" rel="noreferrer">here</a>.</p>\n'}, {'answer_id': 54526, 'author': 'argv0', 'author_id': 5595, 'author_profile': 'https://Stackoverflow.com/users/5595', 'pm_score': 0, 'selected': False, 'text': '<p>With every release, we simply prepend a monotonically increasing integer to the root path of all our static assets, which forces the client to reload (we\'ve seen the query string method break in IE6 before).  For example:</p>\n\n<ul>\n<li>Release 1: http://www.foo.com/1/js/foo.js</li>\n<li>Release 2: http://www.foo.com/2/js/foo.js</li>\n</ul>\n\n<p>It requires rejiggering links with each release, but we\'ve built functionality to automatically change the links into our deployment tools.</p>\n\n<p>Once you do this, you can use Expires/Cache-Control headers that let the client cache JS resources "forever", since the path changes with each release, which i think is what @JasonCohen was getting at. </p>\n'}, {'answer_id': 54538, 'author': 'Jeff Atwood', 'author_id': 1, 'author_profile': 'https://Stackoverflow.com/users/1', 'pm_score': 3, 'selected': False, 'text': '<blockquote>\n<p>It holds onto the copy cached in the browser, even though the web server has a newer version.</p>\n</blockquote>\n<p>This is probably because the HTTP Expires / Cache-Control headers are set.</p>\n<p><a href="http://developer.yahoo.com/performance/rules.html#expires" rel="noreferrer">http://developer.yahoo.com/performance/rules.html#expires</a></p>\n<p>I wrote about this here:</p>\n<p><a href="http://www.codinghorror.com/blog/archives/000932.html" rel="noreferrer">http://www.codinghorror.com/blog/archives/000932.html</a></p>\n<blockquote>\n<p>This isn\'t bad advice, per se, but it can cause huge problems if you get it wrong. In Microsoft\'s IIS, for example, the Expires header is always turned off by default, probably for that very reason. By setting an Expires header on HTTP resources, you\'re telling the client to <em>never check for new versions of that resource</em> -- at least not until the expiration date on the Expires header. <strong>When I say never, I mean it -- the browser won\'t even <em>ask</em> for a new version; it\'ll just assume its cached version is good to go until the client clears the cache, or the cache reaches the expiration date.</strong> Yahoo notes that they change the filename of these resources when they need them refreshed.</p>\n<p>All you\'re really saving here is the cost of the client pinging the server for a new version and getting a 304 not modified header back in the common case that the resource hasn\'t changed. That\'s not much overhead.. unless you\'re Yahoo. Sure, if you have a set of images or scripts that almost never change, definitely exploit client caching and turn on the Cache-Control header. Caching is critical to browser performance; every web developer should have a deep understanding of how HTTP caching works. But only use it in a surgical, limited way for those specific folders or files that can benefit. For anything else, the risk outweighs the benefit. It\'s certainly not something you want turned on as a blanket default for your entire website.. unless you like changing filenames every time the content changes.</p>\n</blockquote>\n'}, {'answer_id': 54540, 'author': 'Gulzar Nazim', 'author_id': 4337, 'author_profile': 'https://Stackoverflow.com/users/4337', 'pm_score': 0, 'selected': False, 'text': '<p>Some very useful techniques in <a href="http://www.codeproject.com/KB/install/DeploySite.aspx" rel="nofollow noreferrer">here</a> even if you are not planning to use powershell to automate deployment.</p>\n'}, {'answer_id': 311153, 'author': 'PhiLho', 'author_id': 15459, 'author_profile': 'https://Stackoverflow.com/users/15459', 'pm_score': 0, 'selected': False, 'text': '<p>For what it is worth, I saw <a href="http://PhiLho.deviantART.com/" rel="nofollow noreferrer" title="deviantART: where ART meets application!">deviantART</a> site, quite a big one, serving their JS files as 54504.js. I just checked and see they now serve them as v6core.css?-5855446573 v6core_jc.js?4150339741 etc.</p>\n\n<p>If the problem of query string comes from the server, I suppose you can control that more or less.</p>\n'}, {'answer_id': 1208994, 'author': 'Chris Roberts', 'author_id': 475, 'author_profile': 'https://Stackoverflow.com/users/475', 'pm_score': 3, 'selected': False, 'text': '<p>I\'ve written a blog post about how we overcame this problem here:</p>\n\n<p><a href="http://solutionmania.com/2009/7/30/avoiding-javascript-and-css-stylesheet-caching-problems-in-asp.net" rel="noreferrer">Avoiding JavaScript and CSS Stylesheet Caching Problems in ASP.NET</a></p>\n\n<p>Basically, during development you can add a random number to a query string after the filename of your CSS file. When you do a release build, the code switches to using your assembly\'s revision number instead.  This means that in your production environment, your clients can cache the stylesheet, but whenever you release a new version of the site they\'ll be forced to re-load the file.</p>\n'}, {'answer_id': 71866372, 'author': 'Stephen Duffy', 'author_id': 12894605, 'author_profile': 'https://Stackoverflow.com/users/12894605', 'pm_score': 0, 'selected': False, 'text': "<p>I've resorted to dunking the class I'm working on into the main script which does not seem to suffer from the same aggressive cacheing problems as those called from main script. (For some reason? - Using Firefox). Can't see anyway to send a cache header without making things more complex like javascripts served as an asp/php page with a cache header.</p>\n<p>I'm sure it makes browsers work faster and more efficiently but it's a real PITA for development. Anyone who wants and knows how to do an RFC for HTML6, it would be good if we could go:</p>\n<pre><code>&lt;script src='script.js' max-age=0 nocache /&gt;\n</code></pre>\n"}]
['https://Stackoverflow.com/questions/54475', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/5079/']