androidcordovasenchatouch-2.4

How do I make Sencha Touch and Cordova work together?


I have a Sencha Touch application and I would now like to package it with Cordova for Android, iOS and browser.

I am trying for about a day now to make the two work together. I can get a version onto my device, but anytime I try to update it with new code something doesn't work. "Something doesn't work" means one of the following: device shows the "3 dots of death" (blinking 3 white dots on blue background) forever OR a browser-style alert saying app.js was updated and should I reload (with cancel/reload buttons) OR a sencha-style alert saying the application finished upgrading and do I want to reload.

I think the root of the problem is the way Sencha (Cmd?) works or the way I fail to comprehend what I'm doing wrong. I seem in misunderstand what the difference between "production", "package" and "native" is. I can understand why "over-the-air" updates can be good, but since this is a local application, I don't need any of that. I don't want/need to have an "archive" folder in my output dir, nor a "deltas" folder. And why does the "archive" folder have extra copies of all my CSSs? ripping out hair

So, I guess my basic question is: how do I make Sencha Touch just build a complete application, without over-the-air updates, deltas, archives, confusing prompts upon launch or the 3-dots-of-death?

While waiting for a discussion to start I'm going to go ahead and keep trying stuff out and report back here with anything I may find.

Final notes:

  1. I am using my own cordova, not Sencha's "sencha cordova" commands. I am confused enough as it is, but maybe I need to try that?
  2. Part of the reason I want a "normal" build with one big Js file without deltas or archives is that I want to send it after compilation to an obfuscation service (jscrambler). Don't know if that's important.
  3. This may be unrelated, but when I'm upgrading an existing installation of my app on an android device, I get the old version of my Javascript (even though the android application itself was updated, I can tell by the version number). I read somewhere that I should remove and add the android platform from my cordova project before compiling... why?

Thanks for your attention, I hope this thread will help any other miserable programmers out there :)

Versions: Cordova -v = 5.3.3, Sencha Touch (zip) = 2.4.2, Sencha Cmd = 5.1.3.61, Android API level = 22, Mac OS X 10.10.5


Solution

  • The best way to handle this is to just let Sencha CMD do it's thing. It can be done other ways but I'd recommend that after figuring out the basics of Sencha Touch and Cordova

    Basically you have a ST project that you can create in CMD.

    sencha -sdk ~/path/to/touch-0.0.0 generate app MyApp ~/path/to/create/my-app
    

    Then you do some dev work and you want to do a build in Cordova

    sencha cordova init com.mydomain.myapp MyApp
    

    The Cordova directory is added to your project and contains..

    cordova
        |_ hooks/
        |_ platforms/
        |_ plugins/
        |_ www/
        |_ config.xml
    

    So just to explain a little before moving forward -- when you run

    sencha app build production 
    

    you get a minified version of you app the (compiled to my-app/build/production/MyApp) is deployable to a web server intended to work well as a mobile website/web app.

    When you run

    sencha app build native
    

    you get almost that same minified codebase but it is compiled to my-app/cordova/www/.

    Sencha's build completes completes with putting code into the www folder it triggers a cordova build. Then contents of the www folder are copied to each platform/[os]/www directory.

    If you make any changes to your project specific to the cordova build you would want to do that in the cordova/www folder (be careful as you might get changes wiped out)

    Sencha CMD's Native build does do some custom things to the index.html to cooperate with Sencha better, but a good deal of it is pretty normal to Cordova. If you CD into cordova you can actually run the normal cordova [options] commands. The difference there is the any changes to your Sencha project is not copied into the Cordova project.

    #1

    I would recommend using the Sencha CMD route as it will make life easier.

    #2

    You shouldn't need to use a third party tool to do anything with your JS as it is done through uglification in the build.

    #3

    I could be wrong but my first guess is in a stand alone Cordova project the platforms code does not update unless you run

    cordova build
    

    I think this might cover your issues but if not I can try to clarify anything.

    EDIT I am using iOS in my examples but swap that with android. Habit :/