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>