PhoneGap Q&A


Thanks to all of you who attended my “Architecting a PhoneGap Application” TechLive session on Tuesday, and thanks also for the great feedback. The recording is available here. A lot of my content was based on my PhoneGap Tutorial available here.

As promised, here are answers to the questions I didn’t have time to answer on Tuesday:

Q: I built an app using PhoneGap, jQuery, and LESS. There is a delay before the app responds to a button click.

A: After you tap a button, mobile browsers wait for about 300ms before they fire the click event. This is to make sure you are actually not performing a double tap. One simple solution is to use the touchend event instead of click. But there are two issues with that approach:

  1. You have to change your code (replacing click with touchend), and touchend will not work when testing your app in the browser on your development machine.
  2. Adding logic to the touchend event could interfere with other touch interactions (like scrolling).

These two problems can be overcome by adding contextual logic to your event handlers. But before you reinvent the wheel, take a look at existing libraries that already address this problem. Fastclick.js is a good place to start. This Google Developers document is also a great resource to better understand the problem and the solution.


Q: Will phonegap support upcoming mobile OSs Tizen & Mozilla mobile?
A: Yes. Click the links below for more info:

Tizen
Firefox OS


Q: How does one solve the problem of getting client approval for iOS devices without the issues of gathering their UDID for provisioning profiles?
A: That’s the Apple process and there is really nothing we can do here. PhoneGap Build can make it easier to distribute your app to beta testers during development, but you still need to get the UDID of their devices.


Q: What kind of tips would you recommend for creating a responsive layout? I already know about media queries and I used a fittext.js for scaling the text within a div .
A: Take a look at Adobe Edge Reflow, a new Responsive Web Design tool (currently in preview).


Q: How do you stop the tap-and-hold on a link which makes a flyout menu to open to browser/copy in iOS.
A: try:

-webkit-touch-callout:none;

Q: Now that I have a PhoneGap app build for iOS, how can I send it to my client for testing? In Android, I just have to send him the APK file, how about in iOS ?
A: You need to sign up for the Apple Developer Program. Then you have to create an Apple developer certificate, and an application provisioning profile that includes the UDID of your client devices.


Q: How can I get a link to the recording of this session when it’s over?
A: It’s available here.


Q: I was told that the Facebook iPhone app was built using PhoneGap … can anyone confirm that?
A: The current Facebook app on iOS is native


Q: What is a good library for page transitions and page handling in general if not jQuery Mobile?
A: Page transitions are really easy to implement with a few lines of CSS. Take a look at Part 13 in the PhoneGap Tutorial. For architectural frameworks, take a look at Backbone.js, Angular.js, Ember.js, and others.


Q: Will the sample code be in GIT?
A: Yes it is available here.


Q: Which is preferable, draw buttons with gradients or just load a PNG file?
A: This may vary depending on the platform. There doesn’t seem to be much of a difference on iOS, but Android (particularly older devices) sometimes struggles with rendering gradients.


Q: How does the App Store review process work? For native iOS apps there is a code review of any changes.
A: PhoneGap apps are native apps. They have a native shell that happens to render a lot of its content using HTML/JS/CSS. The review process is the same as for other iOS apps. The guidelines are available here. Apps are evaluated based on a range of criteria, including user interface design, functionality, content, and the use of specific technologies. As far as I know and based on my own experience submitting apps, a code review is not part of the process. Also based on my experience, the “use of specific technologies” means that if your app doesn’t make use of any device feature (like GPS, accelerometer, camera, contacts, local storage, device events, etc), Apple may consider that it would be better suited as a traditional web app delivered in the browser. PhoneGap obviously gives you access to all the device features, so you have all you need to build an app that complies with the guidelines.


Q: Christophe, can you please create or point us to a good tutorial, that uses the facebook plugin and do some typical things like connecting with facebook, posting something to the timeline? etc
A: That’s my next blog post :) ETA: next Monday.


Q: What is the proper sequence for loading .js files when using cordova.js and jquery/jquery-mobile?
A: Here is what I’m typically doing:

<body>

<!-- HTML markup here -->

<script src="phonegap.js></script>
<!-- JavaScript libraries here -->
<!-- App specific Javascript files here -->

</body>

Q: Do I have to create different folders & config.xml for different devices with www/ or can I use the same code for all devices?
A: The easiest way to build is to use PhoneGap Build. In that case, you have a single directory structure with a single config.xml, and you don’t even have to download the PhoneGap SDK: The right cordova.js for each platform will be injected by PhoneGap build. If you don’t want to build in the cloud using PhoneGap Build, I recommend you take a look a the Command Line Tools Interface to create your project structure.


Q: Can I use PhoneGap build if using Cordova?
A: Yes, since the PhoneGap and Cordova libraries are the same. Just add:

<script src="phonegap.js"></script>

… to your index.html page, and the right version of Cordova for each platform will be injected by PhoneGap build.


Q: If I have cordova.js before I send it into PhoneGap will it replace it in PhoneGap or am I running two .js files on PhoneGap build?
A: In the app you submit to PhoneGap build, you should just have this:

<script src="phonegap.js"></script>

… and phonegap.js should actually not be present in the root folder. PhoneGap build will inject the right cordova.js for each platform.

Let me know if you have other questions.

Thanks!
Christophe

8 Responses to PhoneGap Q&A

  1. Jose Luis Campanello February 28, 2013 at 11:22 pm #

    Hi Christophe,

    i’m using phonegap (and phonegap build) and creating an application with jquery mobile.

    Everything is good so far, but one thing i have been unable to do (so far) is to dynamically load a local js or css file. By local i mean that it is actually packaged with the application in the www folder.

    What i want to do is to make the application as light as possible until i really need the functionality on those files, hence the “dynamic loading” idea.

    I’ve tried the jquery loader (getScript method) but no luck.

    Thanks a lot!

    PS: i’ve really enjoyed the phonegap api demo app on my ipad.

  2. Billy March 1, 2013 at 9:39 pm #

    Is it too much to expect for a phonegap app to perform like a native app? I have tried many libraries and still struggle delivering an app with things like smooth transitions, flickering, all round general performance in both ios and android etc.

    Does the perfect combination of js libraries/scripts exist or should I be lowering my expectations with what a phonegap can achieve?

  3. JC Onofre March 1, 2013 at 10:15 pm #

    ‘been testing jquery + handlebars and i stumble with this question, what is the best way to to share data between templates that i just gather from a service?

  4. Nuno F Silva March 2, 2013 at 1:47 am #

    Thank you Christophe :)
    Will be waiting for your next tutorial (facebook stuff) :)
    Cheers!!

  5. ciekawe strony internetowe July 7, 2013 at 5:21 pm #

    Hmm is anyone else having problems with the pictures on
    this blog loading? I’m trying to determine if its a problem on my end or if it’s the blog.
    Any responses would be greatly appreciated.

  6. Amruta October 8, 2013 at 10:57 am #

    Hi Christophe,

    I’m using phonegap for my android app. I have a requirement to give an option to change language of my app. I have used Mustache.js to support i18n. Now to change language I must unload loaded english.js and load selected indonesian.js file. Is there a way to do this in phonegap?

  7. Breanna July 18, 2014 at 12:51 am #

    You need to take part in a contest for one of the finest
    sites on the internet. I am going to recommend thos site!

  8. Reality based films also grab the attention of many.
    Actually, the cinema home systems subject is invaded by different terms which describe the
    same thing. With Luigi Lo Cascio, Catrinel Marlon,
    Luigi Maria Burruano.

Leave a Reply