If I want to deploy a bug fix to an existing JS file, how do I ensure the old one is not cached on my clients' computers?
Add a comment
|
4 Answers
Normally your static resources should be versionned and served through urls like /static.js?ver=123. So all you would need is to increment the version number. Take for example this very same site, view the source and you will notice the following in the <head> section:
<script type="text/javascript" src="http://sstatic.net/js/master.min.js?v=689f646cde8d"></script>
4 Comments
Joda Maki
are there any known web servers that do not handle this correctly? Or possible https or something?
anddoutoi
Some proxy software is known to have issues with not caching resources with query params. Common practice is to include a version number in the file name e.g.
jquery-1.4.2-min.js.
Hugh
@anddoutoi At first I thought that doesn't seem very useful for version controlled files, but I guess that could be part of a deployment process, possibly when it's being minified.
David
But how does the server identify the right version of the file, when it gets the version as a query in the URL? The version number does not appear anywhere else except in the URL, or am I misunderstanding something here?
If everything is compliant with the specs, you shouldn't need to do anything special. HTTP already has mechanisms to handle this. The browser should send an If-Modified-Since header with the retrieval date or If-None-Match header with the ETag of the cached copy. The server will check the modification time (or the ETag, which should include the modification time in the calculation) of the file on the server and, if the mod time is less than that given by the browser, or the ETag matches, return a 304 Not Modified response. The browser should use its cached copy only when it receives a 304 response.
The one wrinkle in this is caching proxies that either ignore any server-provided Expires header or assume it to be well in the future when not given, in which case you can send a Cache-Control header with the "must-revalidate" directive.
Of course, browsers or proxies may not be compliant, in which case the other answers show you how to force a browser to re-fetch a resource.
Comments
If you are using php
<link rel="stylesheet"
href="<?php echo './general.css?' . filemtime('./general.css'); ?>"
type="text/css" media="screen, projection" />
and forget the problem for ever, it will add the ? followed by the file modification time automatically which will be different every time you change the file.
With other languages should be similar.
1 Comment
Francisco Ochoa
Wouldn't this make the browser load (as if it was new) the file everytime the page is refreshed?
Change the URL in the HTML documents that include the JS.
Appending a number (e.g. version, source control revision, timestamp) to the query string is a common technique.
For example: src="/js/myjs.js?7"
