Force clients to refresh JS/CSS files

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.


DefaultLayout.cshtml

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));
        }
    }
}

UrlHelperExtensions.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;
        }
    }
}

FileUtils.cs

Sitecore html cache not clearing on publish

So you’ve got separate content management and content delivery servers, but when you publish the change is only visible on the content management box.

A likely cause is that you’ve enabled some caching but haven’t updated the config files to clear the cache on your content delivery server.

Sitecores config files contain a list of handlers for what should happen when the event publish:end and publish:end:remote are triggered. Publish end is for the content management server, whereas publish end remote is for your delivery servers. The handler we’re interested in is Sitecore.Publishing.HtmlCacheClearer which contains a list of sites to have the cache’s cleared on.

By default this will contain one entry for website, the default name given to your site in the sites config when you install sitecore. However you will have changed this if your solution supports multiple sites, or if you changed it as part of some future planning to support multiple sites. If your site is missing, just add it to the live (via a patch file of course)

<!-- Html Cache clear on publish events -->
<!-- Force FULL cache clear on publish-->
<event name="publish:end">
 <handler type="Sitecore.Publishing.HtmlCacheClearer, Sitecore.Kernel" method="ClearCache" patch:source="BaseSettings.config">
  <sites hint="list">
    <site>SiteOne</site>
    <site>SiteTwo</site>
    <site>SiteThree</site>
  </sites>
 </handler>
</event>
<!-- Html Cache clear on publish events -->
<!-- Force FULL cache clear on publish-->
<event name="publish:end:remote">
 <handler type="Sitecore.Publishing.HtmlCacheClearer, Sitecore.Kernel" method="ClearCache" patch:source="BaseSettings.config">
  <sites hint="list">
   <site>SiteOne</site>
   <site>SiteTwo</site>
   <site>SiteThree</site>
  </sites>
 </handler>
</event>

Note: in the sample above I have removed all other handlers to simplify the example. You should not remove these from your solution.

For more info on cache clearing and optimising it, see John Wests blog series on the subject here https://community.sitecore.net/technical_blogs/b/sitecorejohn_blog/posts/sitecore-output-cache-clearing-optimization-1-8-introduction-john-west-sitecore-blog