Here you are .. making a kick ass new web application and you use Javascript for fancy features like Ajax calls and all is good,  you publish it and people start to use the application and then some bugs creep up in the javascript portion so you update the code but for some reason people are still reporting bugs that you already fixed.. what is going on you might ask yourself.  The problem is that web browsers cache the response from web servers,  all static files like images, stylesheets and javascript files for example are cached for some period of time, be it couple of hours to weeks or months.  So whatever the current version of the file is on the server does not necessarily mean it is the same file your users currently have.

So how do you force browsers to always fetch the newest file from the server?,  there are many different ways,  you can set up content expiration on the web server but that is not bulletproof + you usually don’t want to tinker with settings on a production web server without extensive testing so you might frown upon that solution much like I did in my case.  The other most common way is to have a version number in the filename, since if you rename the file (or create a new one) and change your link to it in the web page then the browser doesn’t have it and has to fetch it. This is why most javascript libraries have versions in the filenames, like jquery for example.  This is a good way to always ensure the users are using the intended file if you update a library,  but if you previously didn’t have a version scheme for your custom javascript files or if you are frequently changing the files to make minor changes (that might have big impacts) it might be too troublesome to being always incrementing the minor version and changing the reference on every single page that references it so is there a better way?  The answer is yes!  A much simpler way,  check this out.

Here is a sample script reference

<script type=”text/javascript” src=”functions.inc.js”></script>

Simply change it to this if you are using PHP

<script type=”text/javascript” src=”functions.inc.js?v=<?php print(time()); ?>”></script>

Or change the PHP code to whatever gives equivalent function in the language you are using which is simply printing the unix timestamp.   What this is doing is making it so that the filename is never the same from each second to the next and thus the web browser can’t keep it in a cache.  Since everything after ? is ignored you don’t have to change anything in your javascript file.  There is a downside to this though,  since this will force the browser to be always fetching the file on each request it can impact performance of your application.  For small files or small userbase this might not be a big deal but if your application has many users and/or your file is huge then the impact on performance might be severe and you will most likely be better off using a version scheme.

You could also implement an “internal version” scheme,  where you are simply printing a variable that is defined in a central configuration file which is included in every page, and output that variable after the ?v=,  Then after having made some changes and you want to force users to get the new files you just change the version variable in the config file and presto, everybody fetches the new file and the browser keeps it in the cache until you change the version variable again.

Tagged with: