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
- <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
- Regex filter = new Regex("/Changed_[^/]*/");
- string FilterCacheKeyPath(string virtualPath)
- {
- virtualPath = filter.Replace(virtualPath, "/");
- return virtualPath;
- }
Then I replace all the methods to use the striped version of the path/filename
- public class FilSystemWithCacheKey : EPiServer.Web.Hosting.VirtualPathNativeProvider
- {
- public FilSystemWithCacheKey(string name, NameValueCollection configParameters)
- : base(name, configParameters)
- {
- }
- public override bool FileExists(string virtualPath)
- {
- return base.FileExists(FilterCacheKeyPath(virtualPath));
- }
- public override bool DirectoryExists(string virtualPath)
- {
- return base.DirectoryExists(FilterCacheKeyPath(virtualPath));
- }
- public override System.Web.Hosting.VirtualFile GetFile(string virtualPath)
- {
- return base.GetFile(FilterCacheKeyPath(virtualPath));
- }
- public override System.Web.Hosting.VirtualDirectory GetDirectory(string virtualPath)
- {
- return base.GetDirectory(FilterCacheKeyPath(virtualPath));
- }
- public override EPiServer.Security.AccessLevel QueryAccess(string virtualPath, System.Security.Principal.IPrincipal user)
- {
- return base.QueryAccess(FilterCacheKeyPath(virtualPath), user);
- }
- Regex filter = new Regex("/Changed_[^/]*/");
- string FilterCacheKeyPath(string virtualPath)
- {
- virtualPath = filter.Replace(virtualPath, "/");
- return virtualPath;
- }
Then the fun begins 
I created a method that have path and filename as input
- %=FilSystemWithCacheKey.GetCachePath("/Framework/","styles/screen.css") %>
That will return a path with the last changed inside the first path.
- public static string GetCachePath(string path, string filename)
- {
- var newUrl = HttpContext.Current.Cache["VersionPath_" + path + filename] as string;
- if (newUrl == null)
- {
- VirtualPathHandler instance = VirtualPathHandler.Instance;
- var dir = instance.GetDirectory(path, false) as NativeDirectory;
- var dirs = new List<string>();
- dirs.Add((dir as NativeDirectory).LocalPath);
- newUrl = path + "Changed_" + LastAccessed((dir as NativeDirectory).LocalPath, dirs) + "/" + filename;
- HttpContext.Current.Cache.Insert("VersionPath_" + path + filename, newUrl, new CacheDependency(dirs.ToArray()));
- }
- return newUrl;
- }
- public static string LastAccessed(string path, List<string> paths)
- {
- Stack<DirectoryInfo> dirs = new Stack<DirectoryInfo>();
- FileInfo mostRecent = null;
- dirs.Push(new DirectoryInfo(path));
- while (dirs.Count > 0)
- {
- DirectoryInfo current = dirs.Pop();
- Array.ForEach(current.GetFiles(), delegate(FileInfo f)
- {
- if (mostRecent == null || mostRecent.LastWriteTime < f.LastWriteTime)
- mostRecent = f;
- });
- Array.ForEach(current.GetDirectories(), delegate(DirectoryInfo d)
- {
- paths.Add(d.FullName);
- dirs.Push(d);
- });
- }
- return mostRecent.LastWriteTime.ToString("ddMMyyyy_HHmmss"); ;
- }
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.
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?
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 :)
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?
If you then change a image the client cache will not be reset
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...
Lol. Mr Google wrote that method:)
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.
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.
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?
What do you do with images refered by the CSS file? Querystring there also?
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?
I think that the browser do a check (head request) for a resource when there is a querystring parameter