LDSTechForumProjects

Browser Cache

Versioning Static Assets to Control Browser Cache

Written Monday April 8, 2013. If any significant time has lapsed you should call this article into question as I am hopeful better ways will be created/discovered. Also, You may want to check with the Open Web Stack for their take on the problem.

This document covers one way to force browsers to abandon cached assets (jpg, css, etc.) when you release a new version of your web application. Specifically we cover how to pseudo-version the assets via URL path. This article does not cover cache control directives.

Overview

The basic idea of this solution is to publish the assets at a different/versioned URL so the browser naturally abandons the cached version. Instead of publishing the style sheet (or jpeg or whatever) at http://yourapp/styles/project.css you publish it at http://yourapp/1.2.5/styles/project.css. Yuck? True. However this article explains how to accomplish this method of cache control with the least amount of pain and ick possible.

Recycle the Maven Project Version

Create a system property to represent the version by putting a property in your *.catalina.properties that will use the maven project version to represent the asset version.

asset.version=${project.version}

Don't Version the Assets, Just Fake It

We want the URL of the asset to change with each release, but we don't really want to move the assets into a versioned folder. So instead, keep your assets in .../styles/ and direct Spring to remap the location. This relies on the property above getting loaded into a system property which happens automatically in a Stack 3.x project. Modify and repeat for each asset type/location.

<mvc:resources location="styles/*" mapping="/#{systemProperties['asset.version']}/styles/**"/>

Referencing the Assets Properly in Code

In your JPS you can do something like this...

<link src= /${systemProperties[asset.version]}/styles/project.css />

Rolling the Version

Don't forget to roll the version forward with each release.

Test

You can now test by pointing your browser to the versioned URL. The old URL still works too, consider if you want disallow that. http://yourapp/1.2.5/styles/project.css

Other Notes

  • Using a URL parameter like kittens.jpg?version=1.2.3 works for the files themselves but does not work if a css file has a relative reference to an image.
This page was last modified on 8 April 2013, at 14:13.

Note: Content found in this wiki may not always reflect official Church information. See Terms of Use.