Sunday, February 10, 2013

Sencha Touch, Phonegap (Cordova) application not working in Android 4.x - Here is the Solution

Have you ever encountered this issue? When you try to deploy your Cordova+ Sencha Touch app in Android 4.1, your app is not working. It just shows the white screen. In this blog I will explain the issue and mention solution for it.

What is the Issue?

It's not issue of sencha touch but it's an issue of Android. It's not possible to load any URL in android webview which have certain parameters. This issue is reported since Android 3.0 but still it's not resolved. We know that when we use cordova it uses file protocol to open any files. We load index.html file using following URL.

file:///android_assets/www/index.html 
Now we know that Sencha Touch uses Ext.Loader to load the controllers, stores and model files. When Loader tries to load files, URL would be formed as follow.

file:///android_assets/www/app/controller/MyController.js?_dc=xxxxxxxx

That's why it's break because it adds _dc param in each load request of file. What is this _dc param? This is cache buster param that is added by default by Ext framework. Most of the browsers caches the request and particularly GET request. So Ext framework always add _dc param which has unique datetime stamp. So URL looks always different hence browser does not return cached result. And that's what breaks the app in Android.

What is the Solution?

One solution is to minify all your secha touch classes with Sencha Touch build commands. You have to install Sencha SDK tools and setup necessary environment variables for it. After that go to directory of your application.

cd ~/path/to/my/app

After this create jsb3 file for your application using following command

sencha create jsb -a index.html -p app.jsb3

After this build your application.

sencha build -p app.jsb3 -d ./

This final command takes all of the files listed in the jsb and combines them into a single file, which it then minifies to make as small as possible. The output is a file called all-classes.js, which contains all of the framework classes plus your application classes.

You can reference this file to index.html file so you have minified version of your application and it's ready for the production.


Other solution is to disable caching but that is not recommended. You can disable caching for Ext.Loader as follow.

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

Also you can disable caching for all the Ajax request.

Ext.Ajax.setDisableCaching(false);

This will remove _dc param from your ajax request also Ext.Loader will not add _dc param in file download request.

Hope this helps you.


3 comments:

  1. Hello Hirren i ma trying to post my params trough ajax post method (request ) but on server side i got only this data _dc:1416387130808 when i run it on iphone emulator .here is the code


    Ext.Ajax.request({
    url: me.getApplication().getApiUrl() + 'login',
    method : 'GET',

    params: {
    email: email.getValue(),
    password: password.getValue(),
    token:'b9a12ac7b782a1fe74cca9db1a2c511399cd9966f8f590d38975af6756112427'
    },
    success : function(response, options) {
    Ext.Viewport.setMasked(false);
    debugger;
    var data = Ext.decode(response.responseText, true);
    Ext.Viewport.setMasked(false);
    },
    failure : function(response, options) {
    debugger;
    var error = Ext.ComponentQuery.query('container[miID="errorText"]')[0];
    error.show();
    Ext.Viewport.setMasked(false);
    console.log(response);
    }
    });

    ReplyDelete
  2. PLease let me know how could i send data using post method of ajax on server

    ReplyDelete