How to force browser to cache file in IIS? - asp.net

Question

Currently, I append application version to all JavaScript & StyleSheet files to prevent caching in old browsers. It works fine. However, I would like to cache all JavaScript & StyleSheet without any request to web server.
With current setting, web server responses like the following image. I don't want browser to spend time to check ETag for all JavaScript & StyleSheet files.
Here is current setting in web.config
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />

Answer 1

Here is a simple solution with an HttpModule which works across ASP implementations. We used it in a SPA app. It will ask browser to cache certain resources for a year. The home/landing page is an exception and will always be checked using ETag.
Step 1:
The first step you've have already done which is adding the version number in the url of each resource. We do this as an automated step in the build process.
Step 2: Next add a CacheModule class into your app:
public class CacheModule : IHttpModule
{
// extensions to cache, e.g. ".css",".html",".js",".png",".jpg",".gif",".ico",".woff",".eot",".svg",".ttf"
private readonly string[] _extensions = ConfigurationManager.AppSettings["CacheModule_Extensions"].Split(",");
private readonly string[] _exceptions = ConfigurationManager.AppSettings["CacheModule_Exceptions"].Split(",");
public void Dispose() {}
public void Init(HttpApplication context)
{
context.EndRequest += (sender, args) =>
{
var ctx = HttpContext.Current;
var path = ctx.Request.Url.GetComponents(UriComponents.Path, UriFormat.SafeUnescaped);
var isExcept = _exceptions.Any(path.Contains);
ctx.Response.AddHeader("Cache-Control", "private");
if (_extensions.Any(path.Contains) && ! isExcept )
{
ctx.Response.AddHeader("Expires", (DateTime.Now.ToUniversalTime().AddYears(1)).ToString("r"));
}
else if (isExcept)
{
ctx.Response.AddHeader("Expires", (DateTime.Now.ToUniversalTime().AddHours(-1)).ToString("r"));
ctx.Response.AddHeader("Max-Age", "0");
}
};
}
}
Step 3: Finally you put in your config:
<?xml version="1.0"?>
<configuration>
<appSettings>
<!-- resource extensions to cache -->
<add key="CacheModule_Extensions" value=".css,.html,.js,.png,.jpg,.gif,.ico,.woff,.eot,.svg,.ttf" />
<!-- exceptions to caching such as home/landing page e.g. "index.html" or any page/resource with known url that users may enter directly or may be redirected to -->
<add key="CacheModule_Exceptions" value="index.html,buildinfo.html,unsupportedmobilebrowser.html, unsupportedbrowser.html" />
</appSettings>
<system.webServer>
<modules>
<add name="CacheModule" type="MyApp.Caching.CacheModule, MyApp"/>
</modules>
</system.webServer>
</configuration>

Answer 2

As IIS serves files and watches for changes, IIS will always send re-validation cache header, forcing browser to check for changes. To get rid of this problem, we designed CachedRoute as shown below, however this works well in ASP.NET MVC but with little changes you can implement same in ASP.NET WebForms as well.
This code also gives you benefit of moving your static resources to CDN.
Cached Version URL Prefix
We had to come up with versioning of static content like /cached/version/, this is nothing but just a url prefix for static asset. version can be any random alphanumeric string totally useless, but identifies different version.
Well one of the easiest approach is to use a version key in the URL.
First, create build version in AssemblyInfo.cs
[assembly: AssemblyVersion("1.5.*.*")]
Leave, * as build number replacement, .net compiler will automatically increment with each build.
Or define version in app settings as follow
<appSettings>
<add key="Static-Content-Version" value="1.5.445.55565"/>
<add key="CDNHost" value="cdn1111.cloudfront.net"/>
</appSettings>
// Route configuration
// set CDN if you have
string cdnHost = WebConfigrationManager.AppSettings["CDNHost"];
if(!string.IsEmpty(cdnHost)){
CachedRoute.CDNHost = cdnHost;
}
// get assembly build information
string version = typeof(RouteConfig).Assembly.GetName().Version.ToString();
CachedRoute.CORSOrigins = "*";
CachedRoute.Register(routes, TimeSpam.FromDays(30), version);
Now on each page, reference your static content as,
<script src="#CachedRoute.CachedUrl("/scripts/jquery-1.11.1.js")"></script>
While rendering, your page will be rendered as (without CDN)
<script src="/cached/1.5.445.55565/scripts/jquery-1.11.1.js"></script>
With CDN as
<script
src="//cdn111.cloudfront.net/cached/1.5.445.55565/scripts/jquery-1.11.1.js">
</script>
Putting version in URL path instead of query string makes CDN perform better as query strings can be ignored in CDN configuration (which is usually the default case).
Advantages
If you set version same as Assembly version, it becomes easy to put new build. Otherwise you have to manually change web.config with every time when version changes.
CachedRoute Class from
https://github.com/neurospeech/atoms-mvc.net/blob/master/src/Mvc/CachedRoute.cs
public class CachedRoute : HttpTaskAsyncHandler, IRouteHandler
{
private CachedRoute()
{
// only one per app..
}
private string Prefix { get; set; }
public static string Version { get; private set; }
private TimeSpan MaxAge { get; set; }
public static string CORSOrigins { get; set; }
//private static CachedRoute Instance;
public static void Register(
RouteCollection routes,
TimeSpan? maxAge = null,
string version = null)
{
CachedRoute sc = new CachedRoute();
sc.MaxAge = maxAge == null ? TimeSpan.FromDays(30) : maxAge.Value;
if (string.IsNullOrWhiteSpace(version))
{
version = WebConfigurationManager.AppSettings["Static-Content-Version"];
if (string.IsNullOrWhiteSpace(version))
{
version = Assembly.GetCallingAssembly().GetName().Version.ToString();
}
}
Version = version;
var route = new Route("cached/{version}/{*name}", sc);
route.Defaults = new RouteValueDictionary();
route.Defaults["version"] = "1";
routes.Add(route);
}
public override bool IsReusable
{
get
{
return true;
}
}
public static string CDNHost { get; set; }
public static HtmlString CachedUrl(string p)
{
if (!p.StartsWith("/"))
throw new InvalidOperationException("Please provide full path starting with /");
string cdnPrefix = string.IsNullOrWhiteSpace(CDNHost) ? "" : ("//" + CDNHost);
return new HtmlString(cdnPrefix + "/cached/" + Version + p);
}
public override async Task ProcessRequestAsync(HttpContext context)
{
var Response = context.Response;
Response.Cache.SetCacheability(HttpCacheability.Public);
Response.Cache.SetMaxAge(MaxAge);
Response.Cache.SetExpires(DateTime.Now.Add(MaxAge));
if (CORSOrigins != null)
{
Response.Headers.Add("Access-Control-Allow-Origin", CORSOrigins);
}
string FilePath = context.Items["FilePath"] as string;
var file = new FileInfo(context.Server.MapPath("/" + FilePath));
if (!file.Exists)
{
throw new FileNotFoundException(file.FullName);
}
Response.ContentType = MimeMapping.GetMimeMapping(file.FullName);
using (var fs = file.OpenRead())
{
await fs.CopyToAsync(Response.OutputStream);
}
}
IHttpHandler IRouteHandler.GetHttpHandler(RequestContext requestContext)
{
//FilePath = requestContext.RouteData.GetRequiredString("name");
requestContext.HttpContext.Items["FilePath"] = requestContext.RouteData.GetRequiredString("name");
return (IHttpHandler)this;
}
}
Sample Response Headers for first request
Access-Control-Allow-Origin:*
Cache-Control:public
Content-Length:453
Content-Type:image/png
Date:Sat, 04 Jul 2015 08:04:55 GMT
Expires:Mon, 03 Aug 2015 00:46:43 GMT
Server:Microsoft-IIS/8.5
Via:1.1 ********************************
X-Amz-Cf-Id: ******************************
X-AspNet-Version:4.0.30319
X-AspNetMvc-Version:5.2
X-Cache:Miss from cloudfront
X-Powered-By:ASP.NET
See, there is no ETag, Vary by, Last Modified or validation header and also see explicit Expires header, when you send explicit Expires header, Browser will never try to validate cache.