Each time you update your website’s Javascript and CSS files through a deployment, there’s a good chance returning visitors will use their outdated cached copy of those files. All web browsers cache Javascript & CSS files for good reason – performance. The browser is supposed to ask the server if the version they have is the latest copy, but often the browser doesn’t ask or this just doesn’t work. Bottom line: if users are using an outdated version of Javascript or CSS, things won’t work or look right for them. It’s a big deal but there’s an easy fix.
The solution is to append a string to the querystring of your Javascript and CSS files that changes every time you build your project. This tells the browser that the file is different and it should go and get the new version. A good way to do this is to use the hash of your web project. You want to use the hash instead of the version number in case your project doesn’t use automatic versioning.
Two HTML helper method for those of you using ASP.NET MVC
Update: MVC4 has this functionality built in. All you have to do is create a bundle and set debug=”false” in your web.config. It’ll automatically bundle, minify, and version your CSS & JS. Amazing! If you’re using a prior version of MVC, use the code below.
Update: We now pass in a type in order to make a hash of its assembly. Since you’ll use this from a markup page, the calling assembly is automatically generated so users will get the files more often than needed.
Usage
<head runat=”server”>
<%= Html.CssInclude(typeof(MyController),
“/content/site.css”,
“/content/openid.css”) %>
<%= Html.JavascriptInclude(typeof(MyController),
“/scripts/openid-jquery.js”,
“/scripts/jquery.simplemodal-1.2.2.min.js”,
“/scripts/site.js”) %>
</head>
Output
<head>
<link rel=”Stylesheet” type=”text/css” href=”/content/site.css?5462907″ />
<link rel=”Stylesheet” type=”text/css” href=”/content/openid.css?5462907″ />
<script language=”javascript” type=”text/javascript” src=”/scripts/openid-jquery.js?5462907″></script>
<script language=”javascript” type=”text/javascript” src=”/scripts/jquery.simplemodal-1.2.2.min.js?5462907″></script>
<script language=”javascript” type=”text/javascript” src=”/scripts/site.js?5462907″></script>
</head>
Source Code
- Source hosted at my Helpers.Net GitHub Project
using System;
using System.Reflection;
using System.Text;
namespace System.Web.Mvc
{
public static class HtmlExtensions
{
/// Renders a Javascript script include tag and appends the assembly’s hash code as a querystring to the file /// to ensure users load the latest code file when the code is updated.
/// Pass a type so we can make a hash of its assembly. This should be a class in your web project.
public static string JavascriptInclude(this HtmlHelper html, Type type, params string[] urls)
{
var sb = new StringBuilder();
var hash = type.Assembly.GetHashCode();
foreach (string url in urls)
sb.AppendLine(string.Format("{0}?{1}", url, hash));
return sb.ToString();
}
/// Renders a CSS include tag and appends the assembly’s hash code as a querystring to the file
/// to ensure users load the latest code file when the code is updated.
/// Pass a type so we can make a hash of its assembly. This should be a class in your web project.
public static string CssInclude(this HtmlHelper html, Type type, params string[] urls)
{
var sb = new StringBuilder();
var hash = type.Assembly.GetHashCode();
foreach (string url in urls)
sb.AppendLine(string.Format("{0}?{1}",
url, hash));
return sb.ToString();
}
}
}
The post Ensure Latest Javascript & CSS in Browser Cache in ASP.NET MVC appeared first on RobVolk.com.