«
»

How to force a reload of JS and CSS files when changed

April 10th, 2013

Caching of Javascript and CSS files is great and really improves performance in the browser. But caching also means that changes to the files are not picked up. So how do you get the browser to automatically reload the files when you have updated them because of new requirements, bug fixed etc.?

There are several ways to achieve this. On Apache you can for instance use the modpagespeed module that automatically changes links to resources when the backend resource files change. Other ways include manually adding a version number to your resources (?version=1234), and changing the file name of the resource.

For IBM Domino, IBM XWork Server and XPages you can of course manually change the file name of your resources when content changes (and remember to update references to those files in your code). A better method is to create your own versioning system for your resources based on the idea of adding a unique id to the link to the resources. The following describes this method.

You can add a version number to an application scoped bean and then update that version number whenever you want the browser to reload your resources. Here's a code snippet for such a version number bean (this is only some of the stuff needed for a bean - see my blog post about creating a bean for more details) :

public class Config implements Serializable {
	private static final long serialVersionUID = 6469339826789980362L;
	private static final String version = "20130410";

	public static String getVersion() {
		return version;
	}
}

Using this bean I can then create links to my Javascript and CSS files like this:

<xp:this.resources>
	<xp:script clientSide="true">
		<xp:this.src><![CDATA[${javascript:"/jsCommon?open&v=" + config.getVersion()}]]></xp:this.src>
	</xp:script>
	<xp:styleSheet>
		<xp:this.href><![CDATA[${javascript:"/custom.css?open&v=" + config.getVersion()}]]></xp:this.href>
	</xp:styleSheet>
</xp:this.resources>

The links then look like this in the browser:

db.nsf/custom.css?open&amp;v=20130410
db.nsf/jsCommon?open&amp;v=20130410

Whenever I want to force a reload, I then update the version string in my Config bean. The resources are then reloaded.

No related posts (automatically generated).

Tags: , ,

This entry was posted on Wednesday, April 10th, 2013 at 10:14. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

10 Responses to “How to force a reload of JS and CSS files when changed”

  1. Urs Meli Says:
    April 10th, 2013 at 11:04

    Nice tip

  2. Sven Hasselbach Says:
    April 10th, 2013 at 11:44

    Good idea. Thanks for sharing!

  3. Oliver Busse Says:
    April 11th, 2013 at 00:07

    Good concept! How to simplify this by using "native" SSJS?

    session.evaluate("@unique")

    This will calculate a new id with every reload in the browser. Sure this might not be an appropiate approach in a productive environment but while developing - if the browser likes to cache "too much".

  4. Per Henrik Lausten Says:
    April 11th, 2013 at 06:58

    Hi Oliver, as you say yourself, calculating a new id on every request is not useful in production but can be useful during development.

    For development purposes you can also use Chrome Developer Tools and set it up to disable cache (when Developer Tools is open).

  5. Anders Magnusson Says:
    April 11th, 2013 at 10:16

    Great tip.

    My question is how I implement this technique through a theme?
    How do I write the ""?

    This is how our resources loaded via a theme:

    text/css
    main.css

  6. Per Henrik Lausten Says:
    April 11th, 2013 at 14:04

    Anders, you can use SSJS in your theme. So you should be able to calculate the href part like this:

    < href > #{javascript:"main.css?open&v=" + config.getVersion() } < /href >

  7. jao lin Says:
    April 13th, 2013 at 11:07

    nice tip but i can't apply it

    in my browser the link hasn't like this:
    db.nsf/custom.css?open&v=20130410

    but it is in this:

    db.nsf/custom.css%3Fopen%26v%3D1cxakbuo4oydc"

    in which every special character is decodified, so the browser doesn't work correctly.

    can u help me

  8. Anders Magnusson Says:
    May 2nd, 2013 at 11:06

    Hello again,

    Tried to use the technique to run javascript in the theme.
    But when writing it in the way you propose the server isn't interpreting the code as javascript and returns the whole code-string as the name of the css.

    Any ideas on how to write/implement the SSJS in the theme in a way that the server understands?

    Maybe using something like inside the ?

    (I don't really understand how the servers transforms the tags used)

  9. Thomas Adrian Says:
    September 9th, 2014 at 13:04

    Here is a stackoverflow thread on the same topic

    How to force update of design changes to clients using xPages?
    http://stackoverflow.com/questions/9332903/how-to-force-update-of-design-changes-to-clients-using-xpages

  10. Upgrading Domino causes issues with CKEditor for Chrome users - FoCul Says:
    July 23rd, 2015 at 15:48

    […] weirdness” after upgrades. These are usually sorted after clearing the cache. Per Henrik Lausten has posted a good scheme to minimise these issues but he says it does not help with the CK Editor […]