Controlling Client-side Caching of Javascript and CSS in Drupal

Posted Mon, 08/09/2010 - 22:38 by jeremy.zerr

While updating CSS and Javascript files on a Drupal website, I ran into a problem.  I couldn't force users to see those new versions of the CSS and Javascript files because as we all know, Javascript and CSS files are cached in web browsers.  So that left me with a problem, since the new Javascript files were needed to allow the website to operate properly.

After looking for a solution, I found that Drupal already handles this, it has a mechanism to allow you to control the client-side cache of people visiting your website.

I know what you are thinking, there's no way you can do that.  Well, you can, you are not manipulating your user's cache, you are instead just pointing them to a new URL.  Its much easier to explain in the video:

So you see, even if your CSS or Javascript files do not change contents, you can force the users of your site to grab a new copy from the server by simply passing a dummy query argument that is different from what you currently have.

The way that you can allow this functionality to happen when developing your own custom modules or themes in Drupal is to make sure that you use drupal_add_js or drupal_add_css to add your files.  That is what allows Drupal to track your files and properly append the dummy query argument to the end.

Very tricky, but very effective, and completely eliminated all the problems I had with users complaining of problems every time I did a release and had CSS and Javascript changes.