Disable caching for ExtJs app

Question

We have a ExtJS 5.01 app built with Sencha cmd 5.0.1.231.

The issue we are facing is that browsers seem to cache the old version of our application. On looking at the network traffic on chrome when our application is served, i can see that app.js, app.css files all have ?_dc={timestamp} appended to them. Now, that tells me that every time a new version of my app is released (which updates this timestamp), the browsers should get a new version. But it seems like sometimes still the old version get served.

Is there anything else i need to do bust cache?

Thanks

Answer 1

I don't get it why "sometimes" the browser is caching your files, even when caching is disabled by default. I even force the framework to use cache whenever possible, by putting this peace of code in my app.js:

Ext.Loader.setConfig({
    enabled: true,
    disableCaching: false
});

While developing I open up my DevTools and set Disable cache (while DevTools is open). This will not allow Chrome to cache files.

But it could be that in your app.json you are forcing "caching" into your local storage by setting "update" or "appcache". Check your localstorage and your app.json to verify.

Answer 2

Set the update property for app.js to full in app.json:

{
    // Path to file. If the file is local this must be a relative path from this app.json file.
    "path": "app.js",

    "bundle": true,  /* Indicates that all class dependencies are concatenated into this file when build */

    // If 'update' not specified, this file will only be loaded once, and cached inside
    // localStorage until this value is changed. You can specify:
    //   - "delta" to enable over-the-air delta update for this file
    //   - "full" means full update will be made when this file changes
    "update": "full"
}

Disable the cache in extjs so browser will get data from server. To do that, add the following app.json file.

"production": {
    "cache": {
        "enable": false
    }
}

"css": [
    {
        // this entry uses an ant variable that is the calculated
        // value of the generated output css file for the app,
        // defined in .sencha/app/defaults.properties
        "path": "${build.out.css.path}",
        "bundle": true,
        "update": "full"
    }
],