If you're thinking about choosing a cross-platform mobile development, then PhoneGap is worth a try. It is widely used for building iOS, Android and other apps. Acquired by Adobe, PhoneGap has been renamed to "Cordova" (also referred to as Apache Cordova). Remember that Cordova is an open-source project on which PhoneGap is built. In simple words, you can think of Apache Cordova as an engine used for powering PhoneGap.
Note: Many people still refer to their project as PhoneGap rather than Cordova, as Adobe continues to use “PhoneGap” for its commercial products. In this post, however, both of these names will be used interchangeably.
- it helps in extending your application across several mobile platforms without making you re-implement the app using each platform's language;
- helps in distributing the app to many different app store portals and so on.
The agenda of this post isn't just about discussing the concept of Cordova, and rather will let you know about the things you should be aware of when developing an app (iOS/ Android) using PhoneGap (or Cordova).
1. Deciding Upon the Plugin You Need to Use
Cordova comes shipped with some great plugins – that is an important part of the app development project. Cordova comes with a minimal set of APIs. However, you can add a few additional APIs with the help of plugins available for Cordova development.
To know about the plugins, you will need to visit the Cordova Plugin Registry. Some of the basic Cordova plugins help in providing to commonly used mobile features like Camera, Geolocation, and a lot more.
Moreover, you can even use several third-party plugins that give the ability to embed extra device-specific capabilities such as analytics, native sharing and many other such capabilities. But, remember that using third-party plugins provides restricted cross-platform support. And thus, it is very important to carefully pick the plugins that will best suit your needs.
So, if you've decided to use the Cordova plugins there are a few things you should know about:
- Undoubtedly, plugins prove one of the best PhoneGap features, but try to avoid using a plugin (particularly a 3rd party plugin) since they may contain potential vulnerabilities. Keep in mind to use only a few plugins.
- Also keeping the plugins updated is another problem you'll encounter when working on a Cordova project, but it is expected that it will soon be fixed. Perhaps, you may be thinking about removing the plugin, and installing the new upgraded version of the plugin. But, to save yourself from going through such hassle, you just need to apply the following CLI's plugin command to your mobile device platform(s) (i.e. the one for which you're developing the app):
$ cordova plugin add org.apache.cordova.device $ cordova plugin ls [ 'org.apache.cordova.device' ] $ cordova plugin rm org.apache.cordova.device
2. What Sort of Platforms You Should Support?
Whether you're using any built-in Cordova plugin or any third-party plugin, supporting the iOS6 or higher versions, and Android 4.4 is a trivial task. For instance, the two most popular Facebook and Twitter iOS-enabled apps support iOS 6 and higher versions only. And thus, you will probably find supporting iOS5 and older versions pretty hard, since those versions are no longer supported in Cordova – after the release of version 3.5.
What's more? The iPad users who haven't updated a higher version post iOS5 are locked down to using apps supporting version 5.1.1. This means, those users won't be able to download your app, unless it is being customized in the Xcode editor. In addition to this, for supporting the iPhone 5S devices, you'll have to make use of the recent version of Cordova (i.e. 3.5 or higher); or else you will have to go through the trouble of customizing the app further in Xcode.
Now moving onto making your app support the legacy Android versions can be horrendously challenging. For doing so, you'll first have to become acquainted with the Android Developer dashboard, so as to check out the weekly updated statistics regarding the different versions of the Android platform, such as the one shown below:
The image provides distribution of the active devices running a version of the Android platform.
Note: Remember that Android versions 2.2 and other previous versions don't come with the Google Play Market, and so users still using those Android versions cannot download your app. Furthermore, Android version 2.3 (i.e. Gingerbread) has been warned officially not be used in the Cordova Security Guide. In fact, a lot of Cordova third-party plugins don’t support Gingerbread, and thus users are discouraged from using this Android platform version as well.
Finally, Android 3.x (i.e. Honeycomb) has received zero percent of interests from users. Therefore, testing your app for it doesn't make sense.
3. Using Xcode and Eclipse For Mobile App Development
You need to use the latest version of Apple tools to get a Cordova app published in the app store such as Xcode 6 and iOS 8.
Note: Before getting started with your Cordova apps, however, it is recommended that you should carefully review the “Apple Rejections & UI/UX Guidelines”.
However, there will be certain things, you might not like about the Cordova Xcode implementation. For example, you might not want the status bar to be visible when an app is being launched. Besides this, you might not wish to customize a few of the Cordova application settings. So, whether you want to carry out the aforementioned tasks or would like to release the app, it becomes needful for you to become familiar with the basics of developing in Xcode IDE.
In order to develop Cordova apps on Android, you'll first have to setup your development environment for the apps. And to do so, you'll need to install and download the Eclipse IDE. But, once again, it is important for you to learn about the basics of signing and publishing an app (i.e. Cordova app) in the Google Play Store.
4. Building Your PhoneGap App In The Cloud
Most of the developers are well acquainted with the PhoneGap/Cordova technology. However, novice developers may find it hard to work such a technology, as it requires users to focus on several aspects. First off, you'll have to install Xcode and configure it (for building an iOS app), and need to learn Java (for building an Android app). Besides this, you also need to install and configure many other compilers. Performing such tasks can be challenging and a pain for beginners, and this resulted in the development of PhoneGap Build. More importantly, it enables developers to build applications in the cloud.
When you need to create an app for any specific platform, the very first thing you need to do is to install that platform's SDK on your computer system. But, this could create an issue. For instance, targeting Windows powered tablets while using Mac can give you a headache, since the Windows SDK requires using a Windows machine only. This is where the Adobe service known as PhoneGap Build comes in handy.
It helps in generating a deployment bundle for the target platform.
When your app development process comes to an end, there are two options you can consider:
- You can either get the deployment package downloaded, and then install it to your mobile device manually;
- Or else take a “QR code” picture directly on the PhoneGap Build’s site. Next download the deployment bundle on your device directly.
Note: One caveat with the cloud-based development services is that not much support is provided for the PhoneGap plugins, although, support is offered for the newly developed plugins. So, figure out your app’s needs to know whether the cloud-based tool you are about to choose supports the PhoneGap plugins that you want.
5. Debug Your App
No matter, how much time you've invested in building a great Cordova/PhoneGap application, you might still encounter some problems in your app. Fortunately, you can use emulators and simulators for identifying some major issues with your app. But, the best way to test an app requires using a real device.
Well, when using emulators for testing an application, at times you may get incorrect information about bugs. And so, knowing about the bugs and/or issues that you find within the platforms or devices you're using for testing will prove useful to you.
Perhaps, you may find debugging Cordova apps a challenge. However, having familiarity with Chrome and Safari Dev Tools can make the debugging process a lot easier for you. Let us now view how you can debug the iOS/Android Cordova applications using the browser's debugging tools.
5.1 Debugging iOS Cordova/PhoneGap Apps
In order to debug apps on any iOS device, you'll need to understand how to perform remote debugging on your device. This requires you to ensure that the debugging option is enabled on mobile Safari. Put it simply, you'll have to enable the Web Inspector option on your device. For doing so, follow the below mentioned steps:
Step 1 – On your iOS device (iPhone or iPad) go to Settings ? Safari ? Advanced, and tap the toggle button next to the Web Inspector option to turn it on.
Figure 1. Enabling Web Inspector
Step 2 – On your Mac system, click on the Safari menu and go to Preferences ? Advanced, and simply make the “Show Develop menu in menu bar” option checked.
Figure 2. How to show develop menu
Step 3 – Now it's time to launch your app in the iOS simulator/ device. Since, we're carrying out the debugging process on a physical device, we will have to connect it to a Mac system using the USB cable. After launching the application, you'll need to switch back to Safari. For this purpose, you just need to tap on the “Develop” menu item. Finally, look for the entry next to the web page that needs to be debugged, as shown in the screenshot below:
Figure 3. Debugging code.
Step 4 – That's it, now you can debug the page on your device just like you would do to debug any web page on Mac. Simply open the app you want to test, and the Web Inspector tool will let you inspect the app.
Figure 4. Checking Web Inspector
Figure 5. Checking the code.
Note: Using the Safari 6 and higher web browsers, you can debug your apps remotely on any iOS-enabled device using the Safari’s developer tools.
5.2 Debugging Android Cordova/PhoneGap Apps
In order to develop apps for Android powered devices, you need to choose Tools ? Inspect Devices from your Google Chrome browser. This will give you complete access to your app's HTML, CSS and JS. For debugging your Cordova app on your physical device, you need to carry out remote debugging on your Android device.
Even though, for sometime Chrome allowed remote debugging for Android, but this feature was made available for PhoneGap/Cordova developers during the time when Android 4.4 moved to using Chromium from WebView.
Next, you need to setup your Android device to perform remote debugging. This requires you to follow these steps:
Step 1 – Navigate to Settings ? Developer Options on your Android phone or tablet.
Figure 6. Accessing Developer Options.
Note: Remember that in Android version 4.2 and older versions, by default, the developer options are hidden. And so, to enable this option, you will be required to tap on the “Build Number” at least seven times.
Step 2 – In Developer options, simply check the “USB debugging” option.
Figure 7. Enabling USB Debugging.
When you receive an alert asking “allow USB debugging”, simply click on OK.
Figure 8. Allowing USB Debugging.
Note: Keep in mind that remote debugging can only be performed on Cordova applications with a debuggable flag. So, in case you're using Cordova platform version 3.3 or higher, make sure to add the following line of code to the element inside your AndroidManifest.xml file:
But, if you’re using the Cordova platform 3.2 version or older version, you will have to use custom code to enable debugging using the WebView.
Step 3 – Now connect your Android device to your computer system via USB, and open up your Cordova application you want to debug. Next, launch Chrome browser from your computer, and then go to chrome://inspect. Lastly, make sure that the “Discover USB Devices” option is checked.
You will once again get a prompt to “Allow USB Debugging” from your computer system. Just click on OK.
That's it, click on the Inspect link for opening the Chrome DevTools to debug for your app and get ready to inspect your application using the DevTools functionality.
Note: In case you encounter any problem in finding your Android device on the chrome://inspect page, then simply head towards the Troubleshooting section.
A Few Other Tips To Consider
Ok! So, till now we have discussed about some of the most important things that you can't afford to miss out when building apps with PhoneGap. However, there are a few other basic tips you should keep in mind during the development process, such as:
#Tip 1: Try Not to Load the Project Files in an IDE
While developing an iOS/Android app with PhoneGap, you'll most likely prefer loading your project files in an IDE – be it Eclipse or Android Studio for Android, and Xcode for iOS apps. However, a beginner may find IDE (or Integrated Development Environment) complex to understand.
What's more, an IDE even adds to fragility of external editing, and on trying to make tweaks in it, can make the Cordova CLI unable to build or upgrade the apps. Put it simply, make sure that you're comfortable in working with several IDE's and or else try avoiding loading your app project files in the chosen IDE.
#Tip 2: When Not to Use PhoneGap For App Development
When using the PhoneGap framework, you may find the task of creating a cross-device application a lot easier. However, there is a caveat with the jQuery Mobile framework: since the UX cannot be customized in tune with the desired platform, both iOS, as well as, Android users will see the same UX.
You may try to mimic the controls of a native platform in HTML and CSS. However, this isn't a good idea. That's because, even though, you may be able to mimic the exact look of the native platform, but imitating how the platform functions can be challenging. For instance, some of the controls won't respond to taps and different gestures in the same way as they do in a native platform. This results in deploying a poor UX experience to users.
Therefore, in case your project demands a UX experience that resembles to the native platform UX experience, then PhoneGap might not be a feasible choice for you.
WebKit is the foundation on which iOS and Android browsers are built. But some of the features can only be implemented in the platform's latest versions. Mobile HTML5 is one remarkably useful site that can be used to check browser version capabilities. Remember that not all of the browsers (i.e. older browsers) support HTML5. And so, developing apps for any old platform, for example, Android 2.x could hinder your development.
But jQuery Mobile and Sencha Touch frameworks can be used to deal with these compatibility issues.
Lastly, you can choose to create your own custom solution to deliver an optimal UX experience to your app users, but you need to keep some patience, as it may require you to spend time in planning and testing.
#Tip 3: Working With Node: Is It Good or Bad?
#Tip 4: Avoid Using Gradients and Box Shadows
With the advent of CSS3, developers are now able to use effects such as Gradients and Box Shadows in their design work, helping them create appealing visual elements. However, adding such properties in your app can performance issues.
Wondering about the solution? Well, when using CSS3 effects make sure to use them sporadically( Ideally in an app based on “News Feed style”). Also, avoid using such properties, multiple times in your app structure. Gradients and Box Shadow effects are ideal to be used for buttons and other elements that only need to be used once.
In fact, you can even find introductory guides to learn about mobile application development in PhoneGap's official website. More importantly, this framework is known for combining the web view in a native app. Of course, there are many great alternatives to PhoneGap, you can consider using to build your app such as jQuery Mobile, and many other frameworks.
In essence, there are many things that you need to consider when developing iOS/Android apps using PhoneGap or Cordova. Through this post, we have tried to cover some of the major considerations worth considering for carrying out the cross-platform app development with Cordova (or PhoneGap).