<p>CSS and Javascript files don't change very often, so I want them to be cached by the web browser. But I also want the web browser to see changes made to these files without requiring the user to clear their browser cache. Also want a solution that works well with a version control system such as Subversion.</p>
<hr />
<blockquote>
<p>Some solutions I have seen involve adding a version number to the end of the file in the form of a query string.</p>
<p>Could use the SVN revision number to automate this for you: <a href="https://stackoverflow.com/questions/2308/aspnet-display-svn-revision-number">ASP.NET Display SVN Revision Number</a></p>
</blockquote>
<p>Can you specify how you include the <a href="http://svnbook.red-bean.com/en/1.4/svn.advanced.props.special.keywords.html" rel="noreferrer">Revision</a> variable of another file? That is in the HTML file I can include the Revision number in the URL to the CSS or Javascript file.</p>
<p>In the <a href="http://svnbook.red-bean.com" rel="noreferrer">Subversion book</a> it says about Revision: &quot;This keyword describes the last known revision in which this file changed in the repository&quot;.</p>
<blockquote>
<p>Firefox also allows pressing <kbd>CTRL</kbd>+<kbd>R</kbd> to reload everything on a particular page.</p>
</blockquote>
<p>To clarify I am looking for solutions that don't require the user to do anything on their part.</p>

[{'answer_id': 3225, 'author': 'grom', 'author_id': 486, 'author_profile': 'https://Stackoverflow.com/users/486', 'pm_score': 6, 'selected': True, 'text': '<p>I found that if you append the last modified timestamp of the file onto the end of the URL the browser will request the files when it is modified. For example in PHP:</p>\n\n<pre><code>function urlmtime($url) {\n   $parsed_url = parse_url($url);\n   $path = $parsed_url[\'path\'];\n\n   if ($path[0] == "/") {\n       $filename = $_SERVER[\'DOCUMENT_ROOT\'] . "/" . $path;\n   } else {\n       $filename = $path;\n   }\n\n   if (!file_exists($filename)) {\n       // If not a file then use the current time\n       $lastModified = date(\'YmdHis\');\n   } else {\n       $lastModified = date(\'YmdHis\', filemtime($filename));\n   }\n\n   if (strpos($url, \'?\') === false) {\n       $url .= \'?ts=\' . $lastModified;\n   } else {\n       $url .= \'&amp;ts=\' . $lastModified;\n   }\n\n   return $url;\n}\n\nfunction include_css($css_url, $media=\'all\') {\n   // According to Yahoo, using link allows for progressive \n   // rendering in IE where as @import url($css_url) does not\n   echo \'&lt;link rel="stylesheet" type="text/css" media="\' .\n        $media . \'" href="\' . urlmtime($css_url) . \'"&gt;\'."\\n";\n}\n\nfunction include_javascript($javascript_url) {\n   echo \'&lt;script type="text/javascript" src="\' . urlmtime($javascript_url) .\n        \'"&gt;&lt;/script&gt;\'."\\n";\n}\n</code></pre>\n'}, {'answer_id': 3233, 'author': 'GateKiller', 'author_id': 383, 'author_profile': 'https://Stackoverflow.com/users/383', 'pm_score': 3, 'selected': False, 'text': '<p>Some solutions I have seen involve adding a version number to the end of the file in the form of a query string.</p>\n\n<pre><code>&lt;script type="text/javascript" src="funkycode.js?v1"&gt;\n</code></pre>\n\n<p>You could use the SVN revision number to automate this <a href="https://stackoverflow.com/questions/2308/aspnet-display-svn-revision-number">for you</a> by including the word <strong>LastChangedRevision</strong> in your html file after where v1 appears above. You must also setup your repository to do this.</p>\n\n<p>I hope this further clarifies my answer?</p>\n\n<p>Firefox also allows pressing <kbd>CTRL</kbd> + <kbd>R</kbd> to reload everything on a particular page.</p>\n'}, {'answer_id': 4026, 'author': 'Lance Fisher', 'author_id': 571, 'author_profile': 'https://Stackoverflow.com/users/571', 'pm_score': 3, 'selected': False, 'text': '<p>In my opinion, it is better to make the version number part of the file itself e.g. <code>myscript.1.2.3.js</code>. You can set your webserver to cache this file forever, and just add a new js file when you have a new version.</p>\n'}, {'answer_id': 6790, 'author': 'Justin Sheehy', 'author_id': 11944, 'author_profile': 'https://Stackoverflow.com/users/11944', 'pm_score': 3, 'selected': False, 'text': '<p>When you release a new version of your CSS or JS libraries, cause the following to occur:</p>\n\n<ol>\n<li>modify the filename to include a unique version string</li>\n<li>modify the HTML files which reference the library to point at the versioned file</li>\n</ol>\n\n<p>(this is usually a pretty simple matter for a release script)</p>\n\n<p>Now you can set the Expires for the CSS/JS to be years in the future.  Whenever you change the content, if the referencing HTML points to a new URI, browsers will no longer use the old cached copy.</p>\n\n<p>This causes the caching behavior you want without requiring anything of the user.</p>\n'}, {'answer_id': 60686, 'author': 'Michelle', 'author_id': 4058, 'author_profile': 'https://Stackoverflow.com/users/4058', 'pm_score': 3, 'selected': False, 'text': "<p>I was also wondering how to do this, when I found grom's answer.  Thanks for the code.</p>\n\n<p>I struggled with understanding how the code was supposed to be used.  (I don't use a version control system.)  In summary, you include the timestamp (ts) when you call the stylesheet.  You're not planning on changing the stylesheet often:</p>\n\n<pre><code>&lt;?php \n    include ('grom_file.php');\n    // timestamp on the filename has to be updated manually\n    include_css('_stylesheets/style.css?ts=20080912162813', 'all');\n?&gt;\n</code></pre>\n"}]
['https://Stackoverflow.com/questions/3224', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/486/']