PhoneGap is a platform for creating native mobile phone applications using HTML 5.
HTML 5 is a powerful new specification that goes well beyond the capabilities of traditional HTML. APIs that are new in HTML 5.
- Canvas: 2d drawing
- Offline Web Applications
- Document Editing
- Drag and Drop
- Cross Document Messaging
- Browser History Management
- Web Storage (Stores large amounts of data better than Cookies)
- Geolocation
- Indexed DB
- ...
However, HTML 5 alone is not enough for delivering portable mobile phone applications. For instance, it does not contain many of the APIs needed to access the sensors on your phone: Compass, Barometer, Proximity and others. It does not provide access to the event data that you may need: battery level, connection status and other events. It certainly doesn't provide you with access to platform specific features such as Android notifications.
Enter PhoneGap, it is the middle layer that sits between the native platform and HTML 5. There is nothing magic about PhoneGap. You can certainly implement HTML 5 applications on Android without it. But it makes HTML 5 development more convenient for you:
- It sets up a managed WebView so there is no need to do this manually. When implementing a PhoneGap application you start thinking about HTML immediately rather than having to deal with setting up the native portion of the application -> Delclaring a WebView layout, Setting it as the content view, etc.
- It handles accessing native APIs for you. Without phoneGap, you would need to write code like: WebView.addJavaScriptInterface(new BarometerReader(), "barometer");
The second point is by far the most important. By providing Javascript APIs for accessing native data, PhoneGap can insure that your Javascript is the same on every platform. It eliminates the small percentage of Javascript code that would need to be rewritten for each platform. The PhoneGap APIs are located here:
http://docs.phonegap.com/en/1.4.0/phonegap_notification_notification.md.html#Notification
They include support for:
http://docs.phonegap.com/en/1.4.0/phonegap_notification_notification.md.html#Notification
They include support for:
- Accelerometer
- Camera
- Capture
- Compass
- Connection
- Contacts
- Device
- Events
- Geolocation
- Media
- Notification
- Storage
Let's look at very simple example:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
function onDeviceReady() {
var element = document.getElementById('deviceProperties');
element.innerHTML = 'Device Name: ' + device.name + '<br />' +
'Device PhoneGap: ' + device.phonegap + '<br />' +
'Device Platform: ' + device.platform + '<br />' +
'Device UUID: ' + device.uuid + '<br />' +
'Device Version: ' + device.version + '<br />';
}
</script>
</head>
<body>
<h1>Let's print some device info</h1>
<p id="deviceProperties">Loading device properties...</p>
<h2>Done</h2>
</body>
</html>
HelloPhoneGapActivity.java:
import com.phonegap.*;
import android.os.Bundle;
public class HelloPhoneGapActivity extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
The output on my HTC Desire looks as follows:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
function onDeviceReady() {
var element = document.getElementById('deviceProperties');
element.innerHTML = 'Device Name: ' + device.name + '<br />' +
'Device PhoneGap: ' + device.phonegap + '<br />' +
'Device Platform: ' + device.platform + '<br />' +
'Device UUID: ' + device.uuid + '<br />' +
'Device Version: ' + device.version + '<br />';
}
</script>
</head>
<body>
<h1>Let's print some device info</h1>
<p id="deviceProperties">Loading device properties...</p>
<h2>Done</h2>
</body>
</html>
HelloPhoneGapActivity.java:
import android.os.Bundle;
public class HelloPhoneGapActivity extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
The output on my HTC Desire looks as follows:
In a nutshell, instead of overriding Activity we now override 'DroidGap' which is provided by the PhoneGap jar library. In onCreate, instead of calling setContentView, we call super.LoadUrl with our index.html file. The full installation and start-up details are located here:
Don't worry, PhoneGap is very easy to set up. The one gotcha is to make sure the following line is correct:
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
In the most recent distributions of the PhoneGap, the script name is slightly different than "phonegap.js". It may be something like: phonegap-1.3.0.js. Ensure this file name correctly refers to the javascript file in your project or onDeviceReady() will not be called.
Is PhoneGap ready for large scale projects? I have my concerns...The code above is the simplest of examples yet it has not managed to correctly print my device name. The device is a HTC desire not a 'htc_bravo' which can be verified on the 'Phone Identity' screen. I suspect it doesn't parse correctly due to the unorthodox string returned by the native API "htc_htc_desire".
I've had feedback from other consultants that have abandoned PhoneGap due to portability issues. I've been told in generally works fine for iPhone and was getting better on Android, but didn't work as well on the smaller platforms like winPhone, BlackBerry, Symbian and others.
In conclusion, you should consider using a platform like PhoneGap to access phone specific features through a standardized API. There are other platforms that can be used to accomplish the same goal: Titanium, JQTouch and Sensha Touch for example. However due to the immaturity of these platforms, you should make sure they are capable of reliably delivering the APIs you need for the mobile platforms that you are targeting.
Glen Cook
eWhiz Mobile
Sources:I've had feedback from other consultants that have abandoned PhoneGap due to portability issues. I've been told in generally works fine for iPhone and was getting better on Android, but didn't work as well on the smaller platforms like winPhone, BlackBerry, Symbian and others.
In conclusion, you should consider using a platform like PhoneGap to access phone specific features through a standardized API. There are other platforms that can be used to accomplish the same goal: Titanium, JQTouch and Sensha Touch for example. However due to the immaturity of these platforms, you should make sure they are capable of reliably delivering the APIs you need for the mobile platforms that you are targeting.
Glen Cook
eWhiz Mobile
http://en.wikipedia.org/wiki/HTML5
http://phonegap.com/
Chris Woods
Martin Lewin
