Force resource reloads after deploying your web application

There you go, deploying version 1.2 of your application. Tests ran smoothly, build succeeded. All is well. That is, until you get the first customer calls that the application "is broken badly" and "looks like shit". Sigh, not again. "Just ctrl-refresh your browser, sir" or worse, "Just empty your cache, ma'am". Stop blaming the users, you dork! There is an easy way out and here's how.

What is happening here is that the browser cache of your users refuses to reload the static content, such as JavaScript and CSS files. It still considers these files "fresh" enough to serve. You can imagine what happens if your user's browser applies old styling and logic to a new application. Yep, that's exactly what your user is experiencing.

What we want to accomplish is the reloading of a selection or all included resources (such as JavaScript and CSS files) after a web application has been redeployed. If we accomplish this, the above problem will cease to occur.

Luckily enough, your browser cache works on the basis of the entire URL, including the query parameters. If even one character in the URL changes, it can no longer be matched to the cached resource and will therefore be considered a new resource.

It is possible to include a file and add a query parameter without any effect on the inclusion:
<link rel="stylesheet" href="styles/main.css?version=12345" />

There are two ways you can go about using this technique, (i) at build time add a timestamp to all of your resources that you require to be reloaded or (ii) maintain separate versioning per resource. The first approach is less error-prone, though might not be what you want for sites with a lot of traffic. The second approach requires more organization, as it must be remembered what resources underwent change, but also gives you more control over what resources are forcibly reloaded.

To the developers -- it is in your power to prevent your user from suffering from stale resources after a redeploy. Your user will love you for it. To the users -- if you have firsthand experience with the scenario described here, bang your developers over the head with this post and make them promise to address the problem. Enjoy!

2 comments:

  1. I have a problem with this solution, I have implemented the query string on all of my script and stylesheet links, but the browser caches the html page. Therefore the html still uses the old query string after I have deployed and the resources remain cached.

    Is there a way to tell the browser to refresh the html files too? Of course these can change just as often as the script files, so the user could still be looking at old html.

    Thanks.

    ReplyDelete
  2. Web design is a constantly changing field that always seems to be growing. As technology advances, the means by which people access the Internet are constantly evolving. These new technologies need web pages built that are able to accommodate their own particular technology and existing web sites are constantly being redesigned, relaunched and reimagined. Web Design Company UK

    ReplyDelete