There are a number of things that can catch you off guard if you are new to creating single paged applications. Some of these things are simple enough to cater for once you know they are a problem, but you wouldn’t even think of them unless you’ve run into them before. Browser caching of client side templates is one of these problems.
Browser caching can be very useful in saving unnecessary requests back to the server for files that the user already has on the client. Unfortunately this feature can come back to bite you when developing single page apps. I ran into this problem for the first time with AngularJS, where I had deployed an application to users only to realise that the only way that I could update the templates was to ask the users kindly to hard refresh their browser, or rename all of the client side templates in the app. (There are a number of solutions for this problem with AngularJS, but that is outside the scope of this post).
Fortunately the fix for this problem with Aurelia is relatively simple. SystemJS provides a hook whereby we can inject ourselves into the loading pipeline and append a cache buster to the end of the requested URL:
This works by calling the default behaviour, then hooking into the URL generated by SystemJS to append the cache buster.
The source for this handy code snippet is ES6 Module Loader Wiki on Github.
By including this code snippet as a part of the Aurelia Bootstrap process we can ensure that template changes are available when the browser is refreshed normally, rather than requiring a hard reload.
Leave a Reply