Force clients to refresh JS/CSS files

6 March 2018

It's a common problem with an easy solution. You make some changes to a JavaScript of CSS file, but your users still report an issue due to the old version being cached.

You could wait for the browsers cache to expire, but that isn't a great solution. Worse if they have the old version of one file and the new version of another, there could be compatibility issues.

The solution is simple, just add a querystring value so that it looks like a different path and the browser downloads the new version.

Manually updating that path is a bit annoying though so we use modified time from the actual file to add the number of ticks to the querystring.

UrlHelperExtensions.cs

using Utilities;
using UrlHelper = System.Web.Mvc.UrlHelper;

namespace Web.Mvc.Utils
{
  public static class UrlHelperExtensions
  {
      public static string FingerprintedContent(this UrlHelper helper, string contentPath)
      {
          return FileUtils.Fingerprint(helper.Content(contentPath));
      }
  }
}

FileUtils.cs

using System;
using System.IO;
using System.Web;
using System.Web.Caching;
using System.Web.Hosting;

namespace Utilities
{
  public class FileUtils
  {
      public static string Fingerprint(string contentPath)
      {
          if (HttpRuntime.Cache[contentPath] == null)
          {
              string filePath = HostingEnvironment.MapPath(contentPath);

              DateTime date = File.GetLastWriteTime(filePath);

              string result = (contentPath += "?v=" + date.Ticks).TrimEnd('0');
              HttpRuntime.Cache.Insert(contentPath, result, new CacheDependency(filePath));
          }

          return HttpRuntime.Cache[contentPath] as string;
      }
  }
}