Browser cache refreshing for CSS and Javascript

After reading an article on it, and having an issue at work concerning it, I put together a script that should keep CSS and JS files refreshed at a configured interval.  I’d like to get comments on it, or just make it available if needed:

Here’s the script, I stored it in a separate JS file and called it into my webpage ( a jsp page) with a script element:

/**
* killCache.js
*
* Small js script that allows for appending a "code" to URLs of CSS or JS files (or
* anything that uses a LINK element) in order to force the browser to update from the
* files and not from cache.
* /

/**
* Round a value to a given interval.
*
* For example:
* (1) if the value is 4 and the interval is 10, then the result will be 0.
* (2) if the value is 755.3 and the interval is 100, the result will be 800.
*
* @param value the current value to check and round
* @param interval the interval to round the value to
* @return the rounded value
*/
function roundTo(value, interval) {
// round the value to the nearest interval
value /= interval;
value = Math.round(value);
return value * interval;
}

/**
* Create a string 'code' that changes every INTERVAL.  this code can be appended to CSS or JS files
* that change in order to make sure the user is always getting the correct version and not a cached version.
*
* @return a string code that changes every INTERVAL so that some files are not cached.
*/
function getRefreshCode() {
var currentTime = new Date();
var intervalToUse = 30; // round minutes to nearest 30 minute interval
var updateInterval = roundTo(currentTime.getMinutes(), intervalToUse);

return updateInterval + "_" + currentTime.getHours() + "_" + currentTime.getDay();
}

/**
* Create a link element in the header where the href also contains a dynamic
* string that forces a periodic update of cache
*/
function addUpdatingLinkToHead(rel, type, href, title) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');

if (rel != null) { link.rel = rel; }
link.type = type;
link.href = href + "?" + getRefreshCode(); // refresh code is added here.
if (title != null) { link.title = title; }

head.appendChild(link);
}

/**
* Create a script element in the header where the href also contains a dynamic
* string that forces a periodic update of cache
*/
function addUpdatingScriptToHead(type, src) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');

script.type = type;
script.src = src + "?" + getRefreshCode(); // refresh code is added here.

head.appendChild(script);
}

and then I the script itself, and my CSS file to the web page like this:

<!-- Small js file that creates CSS links & js scripts and forces them to update occasionally -->
<script src="/js/killCache.js" type="text/javascript"></script>
<script type="text/javascript">
  addUpdatingLinkToHead("stylesheet", "text/css", "/theme/cssFile1.css", "Style");
  addUpdatingLinkToHead("stylesheet", "text/css", "/theme/cssFile2.css", "Style");
</script>
Advertisements

About mpickell

I'm a java developer View all posts by mpickell

One response to “Browser cache refreshing for CSS and Javascript

  • mpickell

    This isn’t the best way. I would like to use each CSS or JS file’s own “last modified” timestamp so i only make the browser reload when the file actually changes. This is simple in PHP, but is there a way to do it in javascript?

    I am guessing that there isn’t a solid method that wouldn’t trigger security issues, or even be completely shut down by the browser, since javascript is client-side. If there’s a method at all.

    I can get around it for my purposes; we are currently using JSF with some JSP pages and I can read the information in a Java class as pass it to the JSP page. Still, it would be nice to have a solution that’s a little more portable.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: