ExtJS 5: disable app.json caching

2016-02-05 tags: extjs cache js

By default ExtJS 5 enabled cache for app.json (or I am wrong?). In some cases you get old version from browser cache, even after new build.

In my case the build sets _dc cache key after each run:

// ./app.json

"loader": {
    "cache": "${build.timestamp}",
    "cacheParam": "_dc"
}

But anyways browser could cache app.json file. To prevent this, let’s generate cache key for app.json request.

Sample code implements this:

<script type="text/javascript">
    var Ext= (Ext || {});
    Ext.manifest = ("app.json?_dc=" + +new Date());
</script>

Just put this code to your index.html file before this line:

<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" type="text/javascript" src="bootstrap.js"></script>

If you use a workspace, it is easier to create a macros in ../workspace/.sencha/workspace/sencha.cfg:

workspace.disableAppJsonCacheScript=\
    <script type="text/javascript">\
        var Ext= (Ext || {});\
        Ext.manifest = ("app.json?_dc=" + +new Date());\
    </script>\

And then update index.html files for each application in the workspace:

<!DOCTYPE HTML>
<html manifest="">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">

    <title>My App Title</title>

    #disableAppJsonCacheScript

    <!-- The line below must be kept intact for Sencha Cmd to build your application -->
    <script id="microloader" type="text/javascript" src="bootstrap.js"></script>

</head>
<body></body>
</html>

Macros must replace #disableAppJsonCacheScript placeholder after build, update ./build.xml file for this:

<target name="-after-build">
    <replace file="${build.out.page.path}"
             token="#disableAppJsonCacheScript"
             value="${workspace.disableAppJsonCacheScript}"/>
</target>

Cache is defeated!