PhoneGap - Developing Cross-Platform Mobile Applications

Developing a mobile application can be a tough venture. Many times, you're learning a language (or languages) that you've never used before, like Objective-C (Cocoa), Java, or c#. For most, there are APIs and SDKs to become familiar with (or in the case of Android, a whole slew of them). In most cases, you're also learning an IDE - Eclipse (or Eclipse+Android add ons, even if you're already familiar with Eclipse), Xcode, etc. There's a lot to learn, and a lot to do. For many companies and developers, learning all of these things twice or three times, in order to deploy applications to multiple mobile platforms is just not an option.

PhoneGap is an application platform that allows the developer to use as little native code as possible, and an existing (probably) knowledge of tools and languages. The premise of PhoneGap is this - create a web application using HTML5, javascript (and jQuery, jQuery Mobile, etc) and CSS3; house this web application in a PhoneGap application shell on every platform you desire (iOS, Android, WebOS, Blackberry, Windows Phone 7, etc), and deploy.

Sound too simple? The web application built using PhoneGap's device APIs allow you to interface with some pre-configured functionality, like using the camera, accessing and saving files, using the internet or network connection, etc.

There is, of course, some functionality that is not (yet) built into phonegap. For these gaps in PhoneGap, The developer has the ability to create a PhoneGap plugin. PhoneGap plugins require creating native code (Objective C, Java) for each platform for which you need the plugin.

One example of a need for a plugin is, a browser. This is ironic because PhoneGap uses the devices' native browser controls to display your application, but it lacks functionality and flexibility for accessing and using external sites or web applications (not stored on the device). I'm currently working on a PhoneGap application which is even simpler than most PhoneGap apps - because it just points to an external web application. I needed a few things that weren't built into PhoneGap, however. I needed a status indicator to show that a page is loading, back/forward/reload buttons, the ability to handle a lost network connection, and some caching functionality that I'll talk about in another post.

While PhoneGap does have the ability to check the device for an active network connection, when you're using an external web application, you can't actively check for network connection on each link click or page change (theoretically you could add the necessary PhoneGap code to your web application, and it would only serve any purpose when viewed in a PhoneGap app, but I don't think this is a very smart route, and my goal was to modify the existing web application as little as possible).

You might be wandering why I decided to even create a native application for this, if all I'm doing is accessing an external web application. The reason is primarily for push and local notifications, as well as better control over caching data (read: entire pages) for offline use.

I found an existing plugin for the browser control that would give me most of the functionality that I needed. I modified the code to remove the url bar, so users can't see what the current url is, nor can they change it manually. I changed the positioning and sizes of the back and forward buttons. I added a reload button, and removed a button that allowed the user to close the browser control and return to the normal application (which, again, doesn't exist in my case). All of these changes required that I modify code on both the Java and Objective-C side (or the xib interface file in XCode).

I haven't yet created my own plugin, as I haven't had a need. The built-in functionality of PhoneGap is pretty comprehensive, and what isn't there likely already exists somewhere on GitHub for you to use and modify.