Over a million developers have joined DZone.

PhoneGap: native applications written in HTML

· Mobile Zone

Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud, brought to you in partnership with IBM.

What if we wanted to run HTML5 applications as native ones on smartphones (and other mobile devices)? The web is evolving fast, but it's not easy to deploy an application of several megabytes through a browser whose cache may or may not work correctly. The user also has to open a link instead of having an icon integrated in the platform, and he may experience difficulties when he is offline.

PhoneGap is a framework for developing mobile applications in HTML, CSS and JavaScript. These apps are deployed into a OS-specific container (for Android, iOS, Windows Phone...) and run as would an Apache instance on localhost do.

A bunch of downloads

If you want to try this out, PhoneGap itself is a small enough package. But you'll need also the Android SDK. I will follow Android for this review due to availability, although PhoneGap supports 7 platforms in total.

The deployment process doesn't need Eclipse or other IDEs with giant extensions to download! I'm happy to use the command line.

On an Android Virtual Device

The emulator for Android is a bit slow, but that's normal for this kind of environments. It's really easy to deploy the example application on an Android Virtual Device by following this tutorial.

The process uses ant. It's good to look closely at what we are deploying:

  • an assets/www/ folder which will be the document root of a fake webserver.
  • Some infrastructure files for Android like AndroidManifest.xml.
  • Some JavaScript libraries like phonegap.js, which link our JavaScript code to the device.

However, the emulator is not really good if we want to evaluate the user experience: it lacks geolocation and lots of other devices; it's just not the same as a real phone.
The actual utility of PhoneGap would be in the features involving the device heavily; we already know the features involving a browser's capabilities (like CSS styling, or Ajax calls) do not change with the platform.

On a real phone

So I installed the GWT PhoneGap showcase on a real phone, through the Android Market.

The startup time of the app and its responsiveness are good, like for a native app. PhoneGap can get pictures from JavaScript! It targets the photocamera application and after the foto is saved (or discarded), it captures the file name for further processing.

The application demonstrates how to mine data from the accelerometer, the compass, the GPS sensor (which provides latitude and longitude.) Local storage also works like you would expect in a browser (as a key-value store).

The back button (and this is not easy to get right cross-platform) is intercepted and usable for navigation into the app screens. It maintains the same feel as in native applications.


The API is JavaScript-based: you call it like you were inside a browser. Some components are new: a standard does not exist at this time for accessing files in a browser.
Other components are, fortunately, implementations of W3C specifications: geolocation, Web SQL, and Web Storage are identical to the ones of a browser. For example:


will obtain a Position object and pass it to your callbacks.

I could only try PhoneGap on an Android device, but both Android and iOS support the various Api components. A list of spported platforms and versions (where applicable) is provided for each of them. For example, the File Api provides access to the filesystem on:

  • Android
  • BlackBerry WebWorks (OS 5.0 and higher)
  • iOS
  • Windows Phone 7 ( Mango )

The application is served from a www/ folder, which will be the equivalent of your main server. You can load .js files (including phonegap-1.2.0.js which provides the Api) from this folder, by specifying relative paths as you would do with a web application.

CSS can be loaded too in the same way (<link> tags). All viewports are HTML, and recognize events such as onclick (although it is actually a tap on phones and tablets.)
Ajax calls can be performed with XMLHttpRequest objects: your preferred JS framework should work for saving data on a server, but you should include its source in the www/ folder to save bandwidth. XMLHttpRequest can be issued towards any server: no Same origin policy applies as you would be limited to localhost in that case.


The goals of a developer using PhoneGap are clear.

First of all, he can save bandwidth: the Offline web application support of the W3C specification is not really ready for primetime; it's sometimes complex to use, prone to break especially due to many different partial implementations from mobile vendors (who have the incentive to lock-in with native apps instead of supporting web standards.)

He can get more integration with the device capabilities, such as camera and file system, without using Flash or waiting for the W3c standards to be incorporated. And he can get an icon for the app instead of a bookmark. :)

The downside of PhoneGap and similar platforms is the level of abstraction that they introduce over plain old web applications or native apps. In an ideal world, we would be able to just work with standard offline web applications.

Martin Fowler pointed out some issues with the cross-platform bit, such as variations between UI controls in different devices (Android buttons and iOS buttons), or the user experience, and the security model. He points at the web as the solution, or as thin wrappers around web apps that deploy as native - exactly what PhoneGap is doing.

The Mobile Zone is brought to you in partnership with Strongloop and IBM.  Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud.


The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}