One known trick is to “timestamp” your css/js references. Simply done, this means that you add some sort of version (or timestamp) to your css/js reference as a query string item. While meaningless to the css/js file itself, the browser caches according to the complete url, with query string, so providing a url which is new to the browser will cause it to download the updated file from the server.
While this was an easy solution, I still had to remember to increment the “version” specified in the query string, each time we updated the file. In development, this is quite often and therefore proved to be quite a “nagging” experience.
Using ScriptReference also provided a solution to “timestamping” the file. Using a recursion, I iterated over all ScriptManager and ScriptManagerProxy controls, usually later in the lifecycle, and added a timestamp to the ScriptReference. The only trick required was to add a version automatically so that the browser will actually load the latest version from the server, without losing the browser caching itself for files not updated. In other words, we only need to to “override” the browser cache when a file was actually updated. If not updated, we’d still like to enjoy browser caching. So the recursion mentioned earlier, which timestamped the ScriptReferences, did exactly that: we added to the querystring the actual modification date/time of the file. As long as the file was not updated, the browser used the cached version of the file. Once updated, the rendered Html contained a file reference with a newer timestamp.
The implementation is as follows:
- Lines 1-4 is the extension method used in the View. These call the LatestContent method in lines 6-16.
- Line 8 resolves the path of file on the server side and line 9 actually checks for its existence.
- Line 11 checks for the timestamp of the file and Line 12 concats the timestamp as ticks to the query string.
Having this extension method split up into two extension methods, allowed me to add one more extension method:
So now I was also able to provide an easy solution for downloading the latest css files using the same code. So the overall code in the View looks as follows: