Views: 4835
Number of votes: 4
Average rating:

Use client cache for resource files (css/js/images) without hassle

I usually creates a virtual path (VirtualPathNativeProvider)  that all my css, images and javascript files is placed in. One reason for this is that later the editors have access to these files with out having to access the server.

The problem comes of course when these files changes. If the current VPP folder have set

Code Snippet
  1. <staticFile expirationTime="4.0:0:0" />

the web browser will not get these new files before they force a cache reset. One way around this “problem” is to not cache it on the client. But that have some downsides.

My solution is to create my own VPP file system based on the VirtualPathNativeProvider.

The whole concept is that I remove a part of the path that contains Changed_ like this

Code Snippet
  1. Regex filter = new Regex("/Changed_[^/]*/");
  2. string FilterCacheKeyPath(string virtualPath)
  3. {
  4.     virtualPath = filter.Replace(virtualPath, "/");
  5.     return virtualPath;
  6. }

Then I replace all the methods to use the striped version of the path/filename

Code Snippet
  1. public class FilSystemWithCacheKey : EPiServer.Web.Hosting.VirtualPathNativeProvider
  2. {
  3.     public FilSystemWithCacheKey(string name, NameValueCollection configParameters)
  4.         : base(name, configParameters)
  5.     {
  6.     }
  7.  
  8.     public override bool FileExists(string virtualPath)
  9.     {
  10.         return base.FileExists(FilterCacheKeyPath(virtualPath));
  11.     }
  12.     public override bool DirectoryExists(string virtualPath)
  13.     {
  14.         return base.DirectoryExists(FilterCacheKeyPath(virtualPath));
  15.     }
  16.     public override System.Web.Hosting.VirtualFile GetFile(string virtualPath)
  17.     {
  18.         return base.GetFile(FilterCacheKeyPath(virtualPath));
  19.     }
  20.     public override System.Web.Hosting.VirtualDirectory GetDirectory(string virtualPath)
  21.     {
  22.         return base.GetDirectory(FilterCacheKeyPath(virtualPath));
  23.     }
  24.     public override EPiServer.Security.AccessLevel QueryAccess(string virtualPath, System.Security.Principal.IPrincipal user)
  25.     {
  26.         return base.QueryAccess(FilterCacheKeyPath(virtualPath), user);
  27.     }
  28.     Regex filter = new Regex("/Changed_[^/]*/");
  29.     string FilterCacheKeyPath(string virtualPath)
  30.     {
  31.         virtualPath = filter.Replace(virtualPath, "/");
  32.         return virtualPath;
  33.     }

Then the fun begins Smile

I created a method that have path and filename as input

  1. %=FilSystemWithCacheKey.GetCachePath("/Framework/","styles/screen.css") %>

That will return a path with the last changed inside the first path.

image

Code Snippet
  1. public static string GetCachePath(string path, string filename)
  2. {
  3.     var newUrl = HttpContext.Current.Cache["VersionPath_" + path + filename] as string;
  4.     if (newUrl == null)
  5.     {
  6.         VirtualPathHandler instance = VirtualPathHandler.Instance;
  7.         var dir = instance.GetDirectory(path, false) as NativeDirectory;
  8.         var dirs = new List<string>();
  9.         dirs.Add((dir as NativeDirectory).LocalPath);
  10.         newUrl = path + "Changed_" + LastAccessed((dir as NativeDirectory).LocalPath, dirs) + "/" + filename;
  11.         HttpContext.Current.Cache.Insert("VersionPath_" + path + filename, newUrl, new CacheDependency(dirs.ToArray()));
  12.     }
  13.     return newUrl;
  14. }
  15. public static string LastAccessed(string path, List<string> paths)
  16. {
  17.     Stack<DirectoryInfo> dirs = new Stack<DirectoryInfo>();
  18.     FileInfo mostRecent = null;
  19.  
  20.     dirs.Push(new DirectoryInfo(path));
  21.  
  22.     while (dirs.Count > 0)
  23.     {
  24.         DirectoryInfo current = dirs.Pop();
  25.  
  26.         Array.ForEach(current.GetFiles(), delegate(FileInfo f)
  27.         {
  28.             if (mostRecent == null || mostRecent.LastWriteTime < f.LastWriteTime)
  29.                 mostRecent = f;
  30.         });
  31.  
  32.         Array.ForEach(current.GetDirectories(), delegate(DirectoryInfo d)
  33.         {
  34.             paths.Add(d.FullName);
  35.             dirs.Push(d);
  36.         });
  37.     }
  38.     return mostRecent.LastWriteTime.ToString("ddMMyyyy_HHmmss"); ;
  39. }

I add this to the Cache and add dependencies to all sub directories to the path.

since all my css links to the images relative to the path all changed to the /Framework/ files will force a new path and therefore a new client cache.

Oct 13, 2011

Joel Abrahamsson
(By Joel Abrahamsson, 10/13/2011 5:59:56 PM)

Nice post Anders! I like the approach and think I'll try it out in my next project.

One question though, I guess this means you don't put this files under source control? Or do you do that and instruct the customers to let you know if they do change something? In other words: what's the work flow?

Anders Hattestad
(By Anders Hattestad, 10/13/2011 6:03:10 PM)

The Framework VPP folder is in source control. And the client knows that they shold not change there. But 1-2 years from now they maybe want to change a logo or something and they have the possiblity :)

greger.olofsson
(By greger.olofsson, 10/13/2011 7:01:46 PM)

What about just adding a native vpp pointing to your styles folder and add the css files to your markup with SquishIt or what ever?
Wouldn't that give you the same result but with the option to have SquishIt minimize the files too?

Anders Hattestad
(By Anders Hattestad, 10/13/2011 8:48:13 PM)

If you then change a image the client cache will not be reset

Nebud Kadnezzar
(By Nebud Kadnezzar, 10/14/2011 1:44:57 AM)

Why o why the use of Array.Foreach(bla bla)????
Why not simply use a foreach(...) ???

Compare:
Array.ForEach(current.GetFiles(), delegate(FileInfo f)
{
if (mostRecent == null || mostRecent.LastWriteTime < f.LastWriteTime)
mostRecent = f;
});

With:
foreach(FileInfo f in current.GetFiles())
{
if (mostRecent == null || mostRecent.LastWriteTime < f.LastWriteTime)
mostRecent = f;
}

It seems as if everyone just needs to show off their C#-fu in every possible way, the one who used the most anonymous methods and lambdaexpressions at the end of the day wins...

Anders Hattestad
(By Anders Hattestad, 10/14/2011 8:23:52 AM)

Lol. Mr Google wrote that method:)

greger.olofsson
(By greger.olofsson, 10/14/2011 11:44:09 AM)

Anders Hattestad > If you then change a image the client cache will not be reset

You're right. In the back of my head I thought that maybe I just add a new image and change the css to point to the new file, but modifying the image would not work well with my solution.

Anders Hattestad
(By Anders Hattestad, 10/14/2011 12:27:21 PM)

But you are right that you could SquishIt together and add the Changed part to the url beeing returned, but since the client is only gonna get these files one time I thought the overhead was not necessery.

Magnus Rahl
(By Magnus Rahl, 11/11/2011 9:34:21 AM)

I use a similar approach but vary a querystring argument rather than a part of the path. I have heard some whispers that different querystring is not treated the same as different path by the some browsers. It seems to work, but I'm happy to hear any arguments against the querystring approach?

Anders Hattestad
(By Anders Hattestad, 11/11/2011 2:00:36 PM)

What do you do with images refered by the CSS file? Querystring there also?

Magnus Rahl
(By Magnus Rahl, 11/11/2011 5:16:30 PM)

Good point. But anything about the querystring vs browser caching? I just learned that IIS kernel mode caching simply skips if there's a querystring present, so there's one reason against it (worse performance when the file is actually retieved). But VPP:s can't be kernel mode cached so there's no difference there?

Anders Hattestad
(By Anders Hattestad, 11/12/2011 3:15:43 AM)

I think that the browser do a check (head request) for a resource when there is a querystring parameter

Please login to comment.