Raible Designs

Prevent Caching of JavaScript and CSS files

We've been having an issue at work for awhile now where our .css and .js files are cached by a proxy server. When we update the app, we get a few users (behind the proxy server) that get served up an old style/script file, and the app looks like it's broken. So I added a super-simple cache-killer to our .js and .css files today. In my taglibs.jsp (included in every JSP), I added:

<%-- Create a variable that is the current time (in milliseconds) to kill
     caching on the proxy server --%>
<jsp:useBean id="now" class="java.util.Date" />
<c:set var="cacheKiller">
    <fmt:formatDate value="${now}" pattern="yyyyMMdd"/>
</c:set>

My date pattern only goes to the day because we don't update the site more than once in the same day. This way, the users will still get the stylesheet/script caching benefit of the browser, but now we control when the file is reloaded, rather than the proxy server. To make sure these files are re-fetched every request, you could use pattern="yyyyMMddHHmmssS" to get all the way down to the millisecond. After adding this, I adjusted my baseLayout.jsp (Tiles template) to add my cacheKiller as a parameter to the src attributes of scripts and stylesheets.

<%-- Get Javascript List --%>
<tiles:useAttribute name="scripts" ignore="true"/>

<c:forEach var="js" items="${scripts}">
    <script type="text/javascript"
        src="<html-el:rewrite page="${js}"/>?<c:out
             value="${cacheKiller}"/>"></script>
</c:forEach>

Works like a charm!

Posted in Java at Jul 14 2003, 10:16:48 AM MDT 6 Comments

Comments:

Don't throw the baby out with the bathwater - you've just killed /all/ caching of those files. Why don't you use the if-modified-since and/or etag headers instead?

Posted by matt on July 14, 2003 at 01:23 PM MDT #

Because it's a little more than a quick hack to add headers for simple .js and .css files. With the method I've implemented, the proxy server will cache these files on a daily basis - and I have the power to change it to a monthly basis (pattern="yyyyMM") if I want. I could add a ProxyHackFilter, but I'd rather do a 5 minute-jobie than a 35 minute jobie. Of course, I could've probably done it by now if I hadn't written this post. ;-) Code samples are welcome...

Posted by Matt Raible on July 14, 2003 at 02:03 PM MDT #

I have to admit, that solution doesn't thrill me. How is a 24 hour period relevant in any way to when the file should be cached? I'm not saying I have the answer right off, but this certainly isn't something I'd throw out to the community as an example solution - because others WILL use what you post, right or wrong.

Posted by Dan Martin on July 14, 2003 at 04:40 PM MDT #

It's only relevant on my current project. Our goal is to prevent caching of CSS and JavaScript files between releases (that's the only time they change). We never deploy more than once a day, but we might deploy in twice in two days. So it's basically my solution to get around our proxy server.

Posted by Matt Raible on July 14, 2003 at 04:59 PM MDT #

Why don't you use the standard HTTP headers for cache invalidation and control?

Posted by Scott Farquhar on July 14, 2003 at 09:08 PM MDT #

Why not prefix with a build number? ie /v123/some.js|css|gif|jpg Lots of ways to implement but avoids arbitrary cache limitation and I would worry that using a query string might prevent less aggresive proxies from caching at all.

Posted by Sam Hough on July 20, 2003 at 02:08 PM MDT #

10+ YEARS

TWITTER

RECENT ENTRIES

Tag Cloud

Prevent Caching of JavaScript and CSS files