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.

PhoneGap Tools and Mobile Frameworks

While PhoneGap effectively solves both the distribution and application capability dilemmas, you're still on the hook for building the application interface, behavior, and other features. Fortunately, several mature Web-based mobile frameworks are at your disposal, including several of which I've recently covered on Developer.com. I'll highlight a few of these tools along with pointers to useful tutorials here:

• GWT Phonegap: This Google Web Toolkit wrapper facilitates integration of the Phonegap JavaScript API into GWT applications.
• Sencha Touch: The Sencha Touch website includes an excellent tutorial explaining how to use Phonegap in conjunction with Sencha Touch, which you can read here.
• jQuery Mobile: Although only a beta release, the popular jQuery project's mobile variant already offers a powerful mobile development solution. It integrates well with Phonegap, as is evidenced by developer Pete Freitag's excellent set of slides (PDF).

In addition to your choice of Web-based mobile frameworks, a number of third-party developer tools are at your disposal. Among these tools you'll find html5sql, a JavaScript module useful for integrating HTML5 databases, and lawnchair, a Couch-like client-side document store. The Phonegap website includes a complete list, which you can find here.

How PhoneGap Interacts with the Mobile APIs

PhoneGap provides developers with access to the mobile device operating system APIs by way of its own JavaScript API. This API is not only incredibly capable, but also well-documented. Keep in mind this API is universal, capable of being used in conjunction with all of the supported mobile platforms, meaning you have the luxury of truly writing once and running everywhere.

Learning Resources for PhoneGap

PhoneGap is a very active project receiving a great deal of attention.

• Phonegap Google Group: Use the group to interact with and ask questions of other developers
• Phonegap Wiki: Although a bit chaotic at the time of this writing, the Phonegap wiki nonetheless provides a great deal of information about different aspects of project usage.
• Get Inspired: The Phonegap website includes a comprehensive list of impressive applications built using Phonegap, be sure to check this out to get a feel for what's possible.

About the Author

Jason Gilmore -- Contributing Editor, PHP -- is the founder of EasyPHPWebsites.com, and author of the popular book, "Easy PHP Websites with the Zend Framework". Jason is a cofounder and speaker chair of CodeMash, a nonprofit organization tasked with hosting an annual namesake developer's conference, and was a member of the 2008 MySQL Conference speaker selection board.