25 Mar 2013 8:15 AM #1
Answered: sencha touch not launching on Android
I am trying to install a sencha app on an android tablet, but I can't seem to get it to work.
When I open the application from the tablet's browser, it works fine though.
I used the cmd tool to package the app, but after installing and running it, the app only shows the index page with the blinking three dots.
I put an alert inside the app.js file and this was executed. However, when I put an alert inside the launch function, the alert didn't run.
I tried proposed solutions like adding
Also I tried different microloaders (testing.js and production.js) inside index.html, but that didn't work either.
I hope someone has got a suggestion, because I am pretty stuck at this point.
I just wanted to let you guys know that my problem was solved by reading the correct documentation.
Instead of following this: http://docs.sencha.com/touch/2-1/#!/...tive_packaging
I followed the outlining here: http://docs.sencha.com/touch/2-1/#!/guide/command_app
The app is now launched, there are no more errors of files not being found, and there is no cross domain issue.
In the end I had to use this command (after dealing with several confi issues and merging errors, but that is situation dependent I guess) for creating the .apk that runs correctly:
sencha app build native
25 Mar 2013 2:16 PM #2
25 Mar 2013 4:58 PM #3
Unfortunately it's is not going to lunch that way on Android or desktop Chrome.
In the last versions Sencha had changes something in the loading process and it is now loading pages from a remote server. Effectively eliminating the option to develop Sencha apps without a server to back you up.
When you install the APP on an Android tablet the APP try to load locally while retrieving some of the data from a remote server and the Chrome browser throws an exception similar to:
XMLHttpRequest cannot load file:///D:/Erez/StartUpIdeas/WeFind/WeFindWebApp/WebApp/app.json. Cross origin requests are only supported for HTTP.
Chrome will not allow you to have a local panel while loading remote content in to it.
When you run it in Chrome directly, the entire APP loads from the server so the cross origin problem does not accrue.
I guess they did not think about developing on the train, in airplanes or airports where a server is not in site.
The only way I managed to make that work was to load it into a Chrome window in a 'Full Screen' mode, not as a local APP. Your local APP is a link to the webAPP which loads into Chrome in full screen mode. Or you can downgrade your Sencha SDK.
On Safari it runs perfectly, I guess Safari is more tolerant to that issue.
A bummer !
25 Mar 2013 8:43 PM #4
There is a setting in the packager.json that allows you to specify the domains from where you expect to get files at run time.
Or was it in phonegap configs?!
26 Mar 2013 12:02 AM #5
At least for me none of them helped in solving the cross platform call issue.
As far as I managed to see it can not be solved unless Sencha calls all it's files from the same place. IMHO it's a browser security feature, once Chrome detects that your container and the data in it are from different origins it will throw an exception and stop loading.
if you take a look at .\touch\microloader\development.js, The loader fetch the app.js of the application by calling a GET XMLHttpRequest.:
xhr.open('GET', 'app.json', false);
On Safari that call fetched the app.json file from the root of the local application so Safari loads the application, on Android that called the root of your application on the server (http://....) so you have the skeleton of your application on the local machine while the app.js in on another machine and the Chrome is not happy with that.
You can try to re-write the loader, I did not go that far ;-)
Or maybe I just did everything wrong ! As far as I can see, event a bare "sencha generate app ..." application will not run as an APP on Android, but ......
Maybe some one from Sencha can enlighten us ?
26 Mar 2013 12:34 AM #6
I had no trouble loading scripts from other hosts, after specifying in configs that I allow that.
You must be missing something.
Otherwise, you can specify allowed domains individually:
<access origin="https://build.phonegap.com" />
You can also allow subdomains, using the subdomains attribute:
<access origin="http://phonegap.com" subdomains="true" />
To ensure that links to this domain cannot take over the entire webview, use the browserOnly attribute (this defaults to false):
<access origin="http://phonegap.com" browserOnly="true" />
The behaviour of the access element is heavily dependent on the platform you're deploying to - we have a blog post with more information. It is also likely to vary between different releases of PhoneGap - we'll work to maintain sane defaults and configurability for PhoneGap Build users.
26 Mar 2013 12:59 AM #7
26 Mar 2013 1:06 AM #8
I am not running under Phonegap right now. I hoped I could use Sencha for the entire workflow. Although it is not working right now, I can't imagine this packager not to create a .apk file that doens't run on my Android tablet. The Sencha team (especially the people who worked on the packager part) will certainly have tested this. right? :-)
26 Mar 2013 1:23 AM #9
You guys do have me thinking about the cross domain issues though. Our app will most certainly have to communicate with a backend server for retrieving all the necessary data. When opening the app as a regular website, the calls to the backend will offer no problem. However, when the app is run from within a native wrapper, no domain is known (the resource is not loaded from the web, but from within the wrapper). In phonegap you can whitelabel the config section to allow the app to retrieve from any domain. I guess Sencha uses (or could use) a similar approach?
26 Mar 2013 2:10 AM #10
Ok, I just ran the app with a global exception handling
window.onerror = function (errorMsg, url, lineNumber)
What I got was:
Uncaught Error: [Ext.Loader] Failed loading 'touch/src/event/Dispatcher.js', please verify that the file exists
Well it exists in my code base...