PhoneGap: Building Native Mobile Apps with HTML, JavaScript and CSS

Willingness to accept and even embrace change is crucial to success in many sectors of today's fast-paced software industry, with Web development perhaps the most fitting representative of this reality. Figuring out how to deal with a sea change of standards, languages, browser compatibility, and security issues are just a few of the job skills Web developers have had to hone over the course of the past fifteen years.

These skills have been hard won at great cost of time and resources, but were well worth the effort because the world wide Web wasn't going anywhere anytime soon, setting up developers for a lengthy and successful career in a thriving industry. Much to our surprise, this quickly proved to be a rather faulty assumption. The soaring rise of smart phones and mobile devices, led notably by the iPhone and iPad, has completely changed the way consumers and businesses the world around access and interact with data, applications, and their community. While the Web certainly remains, it has quickly taken a back seat to the mobile computing environment.

So what's a Web developer to do? Drop everything and learn Objective-C? While this is no doubt a route many have taken in the quest to capitalize on the mobile gold rush, the idea of tossing so much effort out the door has been a bitter pill to swallow for many others, insomuch that a number of solutions have emerged which allow developers to continue using traditional Web technologies such as HTML, JavaScript and CSS to build applications which run natively on mobile devices. A popular solution called PhoneGap does exactly this; it bridges the technical gap separating the traditional Web and mobile environments, allowing developers to transition into the world of mobile application development without sacrificing the majority of knowledge and experience accumulated over their careers.

Introducing PhoneGap

Because popular mobile Web development frameworks such as jQTouch and Sencha Touch were created expressly with the WebKit Web browser engine in mind (upon which both the Safari and Chrome browsers are based), it's possible to create incredibly powerful Web-based mobile applications which in many respects look identical to the native applications installed on the Android and iOS operating systems. However, Web-based mobile applications, no matter how suitable they may seem for mobile use, lack three incredibly important characteristics:

• An inability to access several key APIs such as the current network state, file system, notifications, the address book, and camera.
• Decreased visibility due to lack of presence on the device's touch screen menu (this is possible but not without additional steps taken on behalf of the user)
• Perhaps most importantly of all, lack of distribution visibility because Web applications cannot be distributed through hubs such as Apple's App Store.

PhoneGap remedies all three of these deficiencies by wrapping a Web application written in HTML5, CSS3 and JavaScript within a custom shell. This shell not only meets the requirements necessary to allow for distribution via a crucial marketplace such as the App Store, but also provides the Web application with a straightforward way to interact with key APIs.

Installing PhoneGap

PhoneGap is an open source project, published under both the modified BSD license and the MIT license. You can learn more about licensing details here. To download the project, head over to the PhoneGap website and click the omnipresent download button located on the top-right side of the page. Once downloaded, your next steps will be determined by the desired mobile platform, of which five are supported (Android, Blackberry, iOS, Symbian, and the recently defunct WebOS). No operating system restrictions are placed on those wishing to develop for Android, Symbian and WebOS, whereas if you'd like to target the iOS platform you'll need to be running Mac OS X. Those wishing to target the Blackberry will need to run Windows XP or Windows 7. You can learn more about the platform-specific requirements and installation instructions here.