Skip to main content

Cache Breaking your Sencha application

This blog post might be outdated!
This blog post was published more than one year ago and might be outdated!
· 2 min read
Michael Spahn

Cache is a great thing, but sometimes it causes problems. For example deploying the latest web app but users still having cached JS, CSS files and more cached in their browser. This is not a bad thing in a lot of cases, but consider, you did an API change and the cached JS is still accessing the old API.

A cache break forces the browser to reload certain files and prevent loading old files from cache. The behaviour is actually pretty easy to achieve.

For example consider that snipped to load an javascript file.

<script type="text/javascript" src="app.js"></script>

After changing files they were build into that single app.js and delivered to the browser. In case it's cached there's no chance to determine if the file is the latest or an obsolete one.

To fix this there are actually some approaches:

  1. Force cache time for the app.js file, which would cause the browser to always load the file from the server and results in a lot of traffic

  2. Rename app.js to app_[1..N].js for example and increment the value every time the file is built

  3. is the probably best way and actually called a cache breaker, due to the fact, the browser is unable to find app_2.js, it loads it from the server.

<script type="text/javascript" src="app_2.js"></script>

Another option to achieve the same is to add an param to the file like:

<script type="text/javascript" src="app.js?version=2"></script>

But this version might not work with some caching proxies because they are not handling it like a browser.

To ensure the latest index.* file is delivered to the client, it's important to disable caching for that single file. Keep in mind it's usually just a small html file you don't need to worry about. If it's a larger file you should take care disabling cache due to possible high traffic load.

But in case of an ExtJS 4/5 application it's just fine to disable it using apache2's mod_expires with a config like that:

ExpiresActive On
ExpiresByType text/html "A0"

"A0" let immediately expire any text/html file.

But ensure you did enable mod_expires, otherwise your apache might not start.