7 Things to Consider When Making iOS and Android Apps with Cordova or PhoneGap

addthis-cross-mobile-application-cordova-phonegap

The promise of PhoneGap/Cordova development is quite alluring. Use your existing HTML/JS/CSS skills (and team) to build cross-platform mobile applications for iOS/Android, and other mobile platforms. As a bonus, you can then update your existing codebase once for all platforms instead of maintaining separate repositories (or paying specialized developers). This post will talk about some of the questions and decisions you should consider before beginning your next cross-platform Cordova project.

Cordova or PhoneGap?

This first choice might be a confusing one but it’s really very simple. PhoneGap is a product owned by Adobe which currently includes additional build services, and it may or may not eventually offer additional services and/or charge payments for use in the future. Cordova is owned and maintained by Apache, and will always be maintained as an open source project. Currently they both have a very similar API. I would recommend going with Cordova, unless you require the additional PhoneGap build services.

Which plugins will you use?

Plugins are a big part of the magic of Cordova development. Cordova ships with a minimal set of APIs, and projects add what extra APIs they require through plugins. You can search through all existing plugins using the Cordova Plugin Registry. The core set of “blessed” Cordova plugins provide access to Battery, Camera, Dialogs, Geolocation, and more, which are generally available across all supported platforms.

There are also many other third party plugins that allow extra functionality including native sharing, analytics, and many other platform and device-specific capabilities, however cross-platform support is typically more limited with third-party plugins. Make sure that you are aware of which plugins you will need and make sure that they are available on the platforms and versions you will be supporting. (Note: Cordova and PhoneGap use the same plugins.)

Which platforms and versions will you support?

For the most part it is trivial to support iOS6, iOS7, and iOS8, and Android 4.4 (KitKat, version 19), with Cordova-blessed and third-party plugins, and modern-browser-friendly HTML5 and CSS3. As an aside, both the Facebook and Twitter iOS apps only support iOS 6 and later. It is not as easy to support iOS5 and earlier as these versions have been deprecated in Cordova as of version 3.5.

The first generation iPad is locked at version 5.1.1, so those iPad users (and users who have not updated beyond iOS5) will not be able to download your app from the App Store unless you customize the application in XCode. Additionally, if you are going to support 64-bit iOS devices such as the iPhone 5S, you will either need to use a recent version of Cordova (3.5 or greater), or you will also need to do some further customization within XCode.

Support for legacy Android versions is a bit more complicated, depending on what your specific needs are. You will want to be familiar with the Android Developer dashboard for weekly updated stats about Android platform versions. Android versions 2.2 (Froyo, version 8) and earlier do not have Play Market, so those users won’t download your app. Android version 2.3 (Gingerbread, version 10) is officially warned against using in the Cordova Security Guide, and many third-party Cordova plugins do not support Gingerbread, so its use is discouraged. Android 3.x (Honeycomb, version 11-14) appears to have been completely phased out with zero percent of users in the weekly dashboard (so testing this version might be both complicated and completely worthless).

As far as worthwhile Android versions go, version 4.4 (KitKat, version 19) has excellent CSS3 & HTML support. You can most likely just build your working iOS Cordova app for android and view it in a 4.4.x version Android device and not have any issues at all. Versions 4.0 – 4.3 (Ice Cream Sandwich and Jelly Bean, versions 14-18) will likely require at least a little more effort, especially if you are using hardware-accelerated CSS 3D transforms or scrollable divs. You will probably spend the majority of your UI bug-fixing time working on these versions alone, however at the time of this writing, these versions (not including KitKat) enjoy a combined 63% global distribution, so this is time well spent in most cases.

Regarding CSS and platform support and version fragmentation, one approach that I recommend is similar to that used by Modernizr. You can use the Cordova device plugin to detect the OS and version (and other device-specific properties), and append specialized classes to the html or body elements, such as ‘ios’, ‘android’, and ‘jelly-bean’. This way you can target specific versions with CSS more easily. Another variation on this approach is to add a class such as ‘legacy’ for certain platform versions, to simplify the CSS selectors while still allowing for similar platform/version differentiation.

What form factors will you consider?

Will you support only mobile phone or tablet form-factors, or provide a responsive, universal experience? This question can dramatically change your designer, developer, and tester resource requirements for a given project. Just as each platform and platform version will introduce an extra level of effort, each form-factor/breakpoint setting will introduce a new level of effort for designers and developers.

Additionally, each level of effort for designers/developers will create a new level of effort for testing requirements for each platform version. That is to say that for a project with three supported versions with two identical form-factors, there are two levels of designer/developer effort and six levels of testing effort involved.

What about offline support?

What is your app going to do when there is no internet connection? While some apps don’t require any internet access for normal behavior (e.g. a calculator), some do. Take a moment to consider the user-experience for your app when no internet connection is present. Things that might not work while offline include sharing, linking (includes opening links in an in-app browser), analytics, and file access/transfer (ajax or otherwise). You can use the Cordova Network/Connection plugin to detect the connection type and to handle online and offline detection and event handling.

Are you handy with XCode and Eclipse?

There will probably be some things that you will not like about the out-of-the-box Cordova XCode implementation. For example, do you want the status bar to be hidden when you launch the app (and/or after the start screen)? Do you want to disable Universal application status? You might even want to customize some Cordova application settings or plugins (which are written in Objective-C). If you want to release your application to the App Store (or do some of the things just mentioned), then at some point you are going to have to learn some basics of XCode development. Most of the Android settings can be changed directly in the AndroidManifest.xml file so knowledge of the Eclipse IDE isn’t as essential, however you should be aware of how to sign and publish a Cordova app for Android.

How will you test the app?

It is a good idea to have one or two physical devices for each platform/version combo you are supporting. There are emulators and simulators that can help you to identify some major issues, but nothing beats having a real device for testing. With emulators sometimes you will get false positives or negatives for bugs (and sometimes the emulators have bugs of their own which don’t affect your application). It is also helpful to be aware of the any specific bugs and/or issues with the platforms/versions/devices you are testing.

Debugging Cordova applications can sometimes be a challenge, but if you are familiar with Chrome and Safari Dev Tools it is much easier. For Android devices, you should be able to choose Tools > Inspect Devices and have full access to your application’s HTML, CSS and JS. Similarly in iOS once debugging is enabled in iOS Safari and Mac Safari, you will have access to the Developer Panel with similar access (although with a very XCode-style debugging UI which might take some getting used to). You will need to reopen the Safari Developer panel whenever you restart your app, which can be a pain, but you can also simply reload the app with Command+R instead. Another approach I’ve used is to use setTimeout or an alert to delay the app for debugging so that I have time to open the console before the application starts up.

Hopefully this post will help you to think about the considerations for in-house cross-platform packaged application development with Cordova/PhoneGap. Mobile application development typically involves a lot of testing and iteration, so be sure to plan accordingly.

Interested in learning about Cocoa Touch Static Library vs. Cocoa Touch Framework? Read Kirk’s latest post here.

  • Alex Jonsson

    Thanks Kirk for this conscientious article on hybrid dev. I’d like to propose to use Cordova with a rapid-prototyping tool like Evothings Studio (Apache2 licenced), testing live on clients rather than on emulation. I’m working a lot with Bluetooth Low Energy for connecting phones to other things, and then emulation is not of much use as you can’t do BLE from a simulation.

  • Kirk Elliott ♕

    I agree with you that Cordova/Phonegap is a great way to quickly prototype and test mobile applications both on the front and back ends. I haven’t yet used the Bluetooth LE plugin from Evothings, but I have found that there are some plugins that are not testable without installing the app on a real (physical) device.

  • Alex Jonsson

    You altogether right, and even as Phonegap now have a Developer App at large which is pretty nice for development work as it has many of the core plug-ins installed already, when it comes to connecting phones over BLE, scanning for iBeacons, and low-level networking required for many non-HTTP protocols, these tools make life easier still. Other similar tools also on top of (or integrated with) Cordova include IBM Worklight and Intel’s XSD, although I’ve only looked at them briefly so far.

  • sujata kalluri

    Hi Kirk, its a very nice post. Could you please help to understand if Appium is a suitable tool for testing Cordova application?

  • Kirk Elliott ♕

    I have not personally used Appium, but from what I have read you can use it to test your Cordova/PhoneGap application. Here is a StackOverflow post where someone got it up and running, along with their brief instructions on how to do so: http://stackoverflow.com/a/25157574

  • Jeremy

    Hi,
    I am converting my Android app running Phonegap 2.6 to iOS. Any recommendations about Xcode version I should use? Many thanks

  • Kirk Elliott ♕

    Hi Jeremy, I would recommend using the latest version of PhoneGap/Cordova first of all, and always using the very latest version of XCode as well (version six at the time of this writing). You will need an iOS developer account from Apple to get XCode.

  • Hi,
    Making an iOS and Android apps with Phonegap is little bit difficult for developers who are new in this field. I hope by following your tips developers can easily overcome their problems.

  • Kevin

    excellent post. thx a bunch!

  • Mike Dailor

    Great post Kirk! On top of all of this, I would also recommend selecting a multi-platform workbench like Intel XDK or Appcelerator (there are many others as well) to manage your single base of source code (mostly!) and build/test/deploy it for your selected platforms. You don’t want to spend all of your time figuring out how to work the Cordova/PhoneGap command line tools, Xcode, Eclipse and Visual Studio and *then* get to work on your app; let someone else do the heavy lifting for you so you can concentrate on your code. For myself, I’ve settled on the Intel XDK and, as Alex said, Evothings for rapid on-device testing during development. As you say, nothing beats building your app into an IAP/APK/etc. and testing it on an actual device, but for the other 90% of the project where you’re trying to get to that point, there are lots of options out there to help you.

  • vsync

    Nowhere do you mention HTML apps are extremely slow, since they run on a browser, compared to native apps which almost unlimited performance-wise.
    If you have an app which does pretty “heavy” calculations or want to migrate your web service to smartphone users…HTML & Javascript will not work and the UX will be slow and painful.

  • Rabia Iftikhar

    great post.. thankyou so much :)
    I have one question. When we install phonegap then it also install cordova.. why is it so?

  • Kirk Elliott ♕

    Hi Rabia,

    As I understand it, PhoneGap is an Adobe-owned version of Cordova (basically Cordova with some extra icing on top). This means that installing PhoneGap basically installs Cordova, plus a little bit more code for PhoneGap.

  • Rabia Iftikhar

    okay thankyou :)

  • Frank

    I am new to this sphere. Why do the hybrid apps not allow threads to run outside of the browser for heavy computation? Can there not be communication within and without? Forgive my lack of understanding. The heavy computation..it should run on smartphone and not webservice? Is the question not economic rather than technical?

  • Nice post ! Thanks for sharing

  • Mansur Kapadia

    Hello Kirk
    i am making an android application as my final project
    I dont know anything about it, so i want to know 1 thing
    tht do we require a database for storing the information
    as my project is about library system, i will have to display certain books
    and if it will require the use of database, how may i store it MySQL??

  • Alex

    Thanks for your informative article.
    I have to persuade my boss, do you know
    which app in Apple App Store is developed by Cordova?
    Thanks a lot.

  • thanks for this informative article .. its excellent.PhoneGap is built on top of Cordova and both have access to the Cordova
    API. PhoneGap and Cordova differ by how their packaging tools are
    implemented. PhoneGap provides a remote building interface that lets you package and emulate an application for a single platform
    in the cloud. The PhoneGap Native Packager components have been updated
    to take full advantage of this feature.

  • thanks for this informative article .. its excellent.PhoneGap is built on top of Cordova and both have access to the Cordova
    API. PhoneGap and Cordova differ by how their packaging tools are
    implemented. PhoneGap provides a remote building interface that lets you package and emulate an application for a single platform
    in the cloud. The PhoneGap Native Packager components have been updated
    to take full advantage of this feature.

  • Thanks for sharing such informative article i found it quite relevant while we are sharing same perspective for mobile app development. I was not aware about certain things which you explained it quite immensely.

  • Kirk Elliott ♕

    Thanks Amanda!

  • Saurabh Agarwal

    what about back end support to the app? I wish to develop an online shopping app. It needs back end and I chose php/mysql support for back end. How will cordova/phonegap will handle the back end support needed?

  • Kirk Elliott ♕

    Hi Saurabh,
    Cordova/PhoneGap is a front-end framework so it doesn’t have an opinion about how your back-end is structured. You will make requests to your back-end using JavaScript (or via native extensions you write in Java, Objective-C, or Swift, which are then called by JavaScript). If you are using jQuery for example, you would use $.get(‘http://yourdomain.com/path/to/your/restful/service/’, callback) where callback is the function you want to call once the service data is received by your application.

  • David Simmons

    Intel XDK is a fork of Cordova formerly called appmobi

  • PRAKHAR

    are hybrid IOS apps which renders visualforce pages in ios gets accepted in app store?

  • krishjohnly

    The information which you shared in this blog was informative. Day-to-day, so many updates are seen in the present mobile market, mainly for software’s.
    cyclicx(dot)com/technology-updates

  • SANGEETH KUMAR S G

    Hey Kirk,

    Nice and helpful article on cordova. Very helpful even for beginners.

    I have a question. We are building a cordova app which provide information to the user on how far he is from a GPS location.

    I went through the cordova documentation and ng-cordova plugin docs. I found that using geolocation and geofencing plugin we can determine the location of the user and also the distance to a reference GPS location. The geofencing plugin did not help us to find the distance as required.

    So, we are now using the Haversine formula to compute the distance. On every click to determine the GPS location using geolocation cordava plugin, we get the varied lat and long(Last 3 digits of lat and long are increasing and decreasing).My question is how much accurate is the GPS algorithm and cordova geolocation plugin ? Our app needs to do this in offline scenarios. So it might be purely depending on GPS of the device. During troubleshooting of the app, I found that the GPS coordinates varies by some decimal values on every fetch, even when I try to do from the same location. What is the accepted variance in meters for the GPS co-ordinates that the geolocation plugin gives?

  • m0rtyr

    totally agree, crosswalk gives you an important boost on your app performance.
    Recently I created an app (cordova+framework7) which runs fine on new devices but poorly on old ones like Galaxy S2 or Xperia U but using crosswalk the app runs smooth

  • AK

    Hi Kirk,

    Great article. Thank you. My startup currently uses Phonegap for our android app. We would like to deploy it on the app store as well, however we are not sure whether Apple would pass the app as it is not native. Do they have any sort of design criteria, since our app follows material design which is synonymous to Android.

    Thanks,
    AK

  • rohit nair

    Will apache cordova give support to beautiful UI’s and work with Windows mobile, Ios and android? And can bootstrap be used with it? I am intending to build a cross platform web app with HTML5, javascript and css. Is apache apt fot ?

  • Kirk

    Cordova will allow you to provide a packaged web application with support for Android, Blackberry, iOS, WindowsPhone and other platforms. Yes, you can use Bootstrap with your HTML, CSS, and JavaScript to create a beautiful app with Cordova.

  • paul

    cool stuff

  • Great post! Definitely things we can do to improve

  • Cara Mooralian

    That’s a nice piece of info.

  • JC

    thanks for this sir. i’m new with hybrid mobile app development and i wanna build an offline mobile app. does cordova suppport offline mobile app?