PDA

View Full Version : Ajax calls in a Sencha Touch app when deploying with PhoneGap



AleCaste
26 May 2011, 11:09 AM
Hello everyone,

I have a Sencha Touch app that runs on our server just fine (let's say: mydomain.com)
The app makes several ajax calls to mydomain.com

We will be embedding the web app in a native shell for iPhone and Android via PhoneGap.
My guess is that when we do so, the app will run locally in the mobile phone through the localhost.

... and thus the ajax calls to mydomain.com will no longer work as those will be cross-domain calls.

The question is if this will actually be the case. If so I guess we will need to change all the ajax requests and use Ext.util.JSONP.request instead.

Thanks,
Alex

udos86
28 May 2011, 5:12 AM
From PhoneGap Wiki


Q. I want to create an application for phonegap to access externally deployed web services via AJAX. How can i resolve the issue with the
cross-domain security policy of XmlHttpRequest?
A. The cross-domain security policy does not affect PhoneGap applications. Since the html files are called by webkit with the file:// protocol, the security policy does not apply.
(in Android,you may grant android.permission.INTERNET to your app by edit the AndroidManifest.xml???)?

Bye,

Udo

AleCaste
28 May 2011, 5:39 AM
Top class. Thanks Udo.

In any case the final test will be to deploy the app with PhoneGap and run the Android emulator to check if the ajax calls do indeed work. I'll post the results here in the thread.

GeorgeWW
14 Jun 2011, 1:20 PM
how did it work out for you?

AleCaste
15 Jun 2011, 5:11 AM
Hi George,

The app is not finished yet so I have not carried out this check yet but will make sure to post the result of it when we port the web-app to PhoneGap.

My guess is that it won't be that trivial since our Sencha app is only a portion of a much bigger web app. We have been careful keeping any single file needed by the Sencha app in a specific separate folder from the rest of the main app, but I'm quite sure we will run into problems...
Will see...

VinylFox
15 Jun 2011, 5:52 AM
For what it's worth, I was not able to get x-domain requests working with the standard AJAX proxy in PhoneGap, but it's so easy to switch to a scripttag proxy that I didn't bother investigating why.

In your store's proxy config just add type: 'scripttag' and specify the entire URL.

Of course your server side will need to recognize the callback param and wrap your JSON response up.

AleCaste
10 Jul 2011, 6:05 AM
As promised, I'm posting the results we've got after deploying our Sencha app using PhoneGap.

All the ajax calls to our main server domain worked fine.
So it's true that all Sencha files are loaded into the phone internet browser using the file:// protocol which allows to get around the cross-domain security restriction.

But because the development team normally tests the Sencha app using a web app server as localhost, there are a few things to consider when designing the Sencha app to make things easier when the time comes to deploy the app to phones using PhoneGap:

1. If you have your ajax calls with relative uris like: "/app_name/controller/action", those ajax calls won't work when deploying the app with PhoneGap.
You need to specify the absolute path like: "http://your_domain/app_name/controller/action" and this is precisely because the index.html file of your Sencha app is going to be run using the file:// protocol

2. The resources (css files, images, etc) you want to include in the app package when deploying the Sencha app, must be in the same folder of your Sencha index.html file, or a subfolder from that directory.
Then you can refer to those files as "./path_to_the_resource/file_name" (knowing that your root folder will now be the directory where the Sencha index.html is located, wherever that is)
The resources you want to keep in your remote server (those that won't be part of the deployed app, but downloaded upon execution of it on the phone) must be referred with absolute uris: "http://your_domain/app_name/path_to_the_resource/resource_file_name"


If you use php, gsp, jsp etc you can write a single Sencha app that can run on either localhost, production domain, or as a deployed app for phones adding some code that takes care of the URIs depending on the environment the app is running on.

One last thing.
Running the Sencha index.htm on the desktop by just double-clicking on it (our default browser is Chrome) should have worked since the file:// protocol is also used.
But it did not. Chrome reports the error: "Origin null is not allowed by Access-Control-Allow-Origin"
The iPhone and Android browsers do not throw this error.
So this is something I am still to investigate.

Hope this helps others,
Alex
BTW... what a nightmare it is to deploy a phone app, you need tons of different software pieces

spirulina tablets
10 Jul 2011, 10:51 AM
Thank you.

udos86
10 Jul 2011, 11:01 AM
Thanks for your report, Alex.

AleCaste
11 Jul 2011, 4:49 AM
Ok guys.
If you want to test your sencha app before deploying it through PhoneGap I recommend you the following:

1. Install the Google Dev version, here:
http://www.chromium.org/getting-involved/dev-channel

2. In the command line, open Chrome with the following switch (this will allow you to bypass the "Origin null is not allowed by Access-Control-Allow-Origin" check in Chrome):
chrome.exe --disable-web-security

3. Now you can doubleclick on your index.htm file and test the app (you may now use your localhost or your remote host to test the ajax calls... just make sure to specity the WHOLE absolute path in your calls)


And that's it.
Much more convenient to test this way first as the dev time will be much quicker.
Once everything is running smoothly you can then use PhoneGap to deploy the app to an iPhone/Android emulator.
And finally you can install the app in an actual phone to check how it really behaves, before uploading it to the markets.

Best regards,
Alex

fx-mike
19 Jul 2011, 2:00 AM
Thanks Alex for this really nice piece of information!

Still having problems on android with ajax calls that work in chrome now, but its really nice to get live data instead of testing with local xml snapshots.

Edit: Seems like I was having an additional problem with phonegap, now everything is working fine. Debugging in chrome is so much nicer than trying to debug on a device!