Purple Blog

02/21/06: JavaScript and CSS Versioning in Rails

To defeat browser caching for static files that actually do change once in a while, a common trick is to append a random number to the URL:

<link href="/css/mysite.css?9238238" rel="stylesheet" type="text/css">

If you use a truly random number (or the current time), it will reload every time. However, this is not exactly what you want; instead, you only want it to reload when the file has changed, and use the cached version when it hasn't. A good way to do this is to use the timestamp of the time the file was last modified.

Here's an easy way to do this in Ruby on Rails.

Use the standard Rails helper functions stylesheet_link_tag and javascript_include_tag (which reference static files inside the 'public' directory):

  <%= stylesheet_link_tag 'mysite' %>
  <%= javascript_include_tag "prototype" %>

Then add the following methods into your application_helper.rb:

 def javascript_path(js_file)
   versioned_path(super)
 end

 def stylesheet_path(css_name)
   versioned_path(super)
 end

 def versioned_path(path)
   if (path.include?("http://"))
     path
   else
     timestamp = File.mtime(File.join(RAILS_ROOT, "public",
path)).strftime("%Y%m%d%H%M%S")
     path + "?#{timestamp}"
   end
 end

That's it!