What is PhoneGap?
Earlier this week at Adobe MAX, it was announced that Adobe had started the process (signed a definitive agreement) of acquiring Nitobi, the makers of PhoneGap. After this announcement, I had multiple conversations with conference attendees and found that several of them really had no idea what PhoneGap is. Some thought it was a JavaScript framework that competes with JQuery or Sencha; others thought it was something that converted JavaScript to native Objective C or Java. Both of these are incorrect – not even close… so I decided to write a quick blog post to explain.
Since I’m more familiar with Android than iOS, I’ll explain how it works for Android.
First, you create a new Android project in Eclipse (requires the Android SDK), add the phonegap.jar file to the lib folder, and make a few tweaks to the manifest and other files (details here). The main java file is modified as follows:
package com.gregwilson.gregpg1;
import com.phonegap.*;
import android.os.Bundle;
public class GregPG1Activity extends DroidGap {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
Notice the highlighted line (line 11) — We’ve created a native Android app, and this native app loads android_assets/www/index.html in WebView when launched. WebView is a class in the Android SDK that allows you to display web pages as a part of your layout. It’s like having a web browser inside of your app and uses the device’s existing implementation of WebKit. In iOS, it’s UIWebView. Other mobile OSes use similar techniques.
Below is my project in both Eclipse (Android) and Xcode (iOS). The web application is in the www folder indicated by the red arrows.
Now you simply compile, build, deploy like any other Android project.
Basically, PhoneGap apps are HTML/JS/CSS apps that run within the WebView (or equiv) component. If you are like me, at this point you are thinking, “Uh – that’s lame – is that it? I can do that today without any additional software”.
But there’s more… PhoneGap extends the WebView class to give it hooks back to the device itself and exposed them as JavaScript. Remember the jar file that is in the project? The project also includes a phonegap.js file, which exposes many new functions that make this much more than simply displaying a web page in a WebView component.
Check out the code below for accessing the device GPS (copied from one of the many great examples from http://docs.phonegap.com). If you create an PhoneGap project and copy the code below to your index.html file, you can see it run.
<!DOCTYPE html>
<html>
<head>
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
//
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />' +
'Accuracy: ' + position.coords.accuracy + '<br />' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
'Heading: ' + position.coords.heading + '<br />' +
'Speed: ' + position.coords.speed + '<br />' +
'Timestamp: ' + new Date(position.timestamp) + '<br />';
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
</head>
<body>
<p id="geolocation">Finding geolocation...</p>
</body>
</html>
Now your “web app” has access to Accelerometer, Camera, Compass, Contacts, and many other device capabilities.
Some observations:
- Since the app itself is super small, it loads crazy fast – less than one second on my HTC Inspire and iPad 2. You probably won’t even need a splash screen.
- The framework is simple and lightweight, so the resulting app has a very small memory footprint. This allows apps to work on older and slower hardware like the original iPhone and older BlackBerry phones.
- The PhoneGap docs and examples are fantastic – clear and concise. I was able to copy/paste every sample and see the results. (one note — the phonegap-1.1.0.js for Android is different than the phonegap-1.1.0.js for iOS – I initially made the mistake of assuming they were identical and killed a few hours trying to figure out why certain samples wouldn’t run)
- The platform support is broad. As of this article, PhoneGap supports iOS (iPhone, iPhone 3G/3Gs/4/4S, iPad 1/2, Android (all versions), BlackBerry OS 4.6 and newer, WebOS, Symbian, Bada and they have recently started to support Windows Mobile. See http://www.phonegap.com/about/features for a list of what’s supported on each.
- Your HTML/JS/CSS run in the native WebView so you are free to use any frameworks you desire such as JQuery Mobile, Sencha, whatever. PhoneGap gives you a WebView/UIWebView with hooks to the device. The rest is up to you.
- PhoneGap is free, open-source and will become an Apache project very soon (translation – it will remain free).
- PhoneGap is extendable via a plugin model giving you a bridge between native code capabilities and JavaScript.
- There is already a great collection of community-created plugins at https://github.com/phonegap/phonegap-plugins.
- I haven’t figured out a good way to debug these types of apps yet. I suspect that this will be a bit of a challenge. There is a console.log() function that will send messages back to your Eclipse console. When the camera sample wasn’t working, I really had no clues as to why. It’s likely that I’m missing something, so it’s too early to judge.
PhoneGap Build
As you start building mobile apps in any technology, you soon discover that each platform has it’s own deployment steps and tooling requirments (some of which are amazingly tedious and error-prone). For example, to build a native iOS app, you use Xcode, which only runs on Mac OS X. To build for BlackBerry phones, you have to use their tooling that only runs on Windows. To build for both platforms, you’ll need two machines (or use virtualization). This is why http://build.phonegap.com was created. The service allows you to upload your www project folder (or give it a GitHub URL) and it will package your app for the supported platforms. The specific steps are documented at https://build.phonegap.com/docs/start. NOTE: Adobe has stated that this service will continue as part of the recently announced “Adobe Creative Cloud” but no details have been provided nor has any pricing been announced.
What’s next
If you’re intrigued, I encourage you to go to http://phonegap.com, where you’ll find everything you need to build an app. I was able to get a Hello World app running on both Android and iOS in under 30 minutes (not counting the downloading of Xcode). The “Getting Started” section is excellent.
Very cool stuff and a great explanation. What you rather prefer, personally, to code an app in. Android java or html/js/css? Document markup and javascript don’t really do OO intrinsically well.
Android/Java is fine as long as you only want to support Android. The advantage of PhoneGap is that it’s supported on Android, iOS, BlackBerry, Symbian, etc. ActionScript is another great option for cross-platform apps…and you get a more “normal” java-like language.
Great introduction.
I build the sample app and deploy to my Android Galaxy s, and it works fine. But I notice that the source code (HTML, CSS, Javascript etc) of PhoneGap-based app is almost open to users. This is bad for app developers. I wonder whether there is some way to secure the source code.
Yeah – I am wondering the same thing. Once the acquisition is complete, I’m going to talk to Andre at PhoneGap and ask that very question. I’m assuming we could write an alternative loadUrl method that will load an decrypt, but I’m not sure. I also discovered that you can load content from an http:// URL rather than a file:// url (requires a new line of code – i’ll blog this shortly). The issue with loading from your server is that you won’t have any offline handling. BUT – you could add a little java code to the main class to handle it appropriately.
Lots to learn
Greg
I found the following on the PhoneGap wiki (http://wiki.phonegap.com/w/page/43660891/Security):
“PhoneGap can actually get around this security concern since application developers can download JavaScript in their application at runtime, run that JavaScript, and delete it when the application closes. In that way, the source code is never on the device when the device is at rest. This is a much more difficult prospect with Java or Objective-C let alone the restrictions in the App Store around dynamically running Objective-C code.”
I don’t think that’s enough though. I could run the app, then pull the battery out of the phone and the source files will be on the device for me to extract because the delete wouldn’t occur.
I still think some sort of on-device encryption/decryption might be the ticket, but I need to do more research.
Greg
Great introduction, I thought I knew what it was but it appears I was completely wrong!
how is the performance of apps build with phonegap?
Performance is exactly what you’ll get using the device’s web browser.
BTW – my performance statement has one tiny flaw — on iOS, the UIWebView uses a different JavaScript engine than the on-device browser, so the browser is actually faster. On Android, it’s identical (as far as I know). I think iOS 5 will bring it up to the same level.
Greg
Just wanted to thank you for the great writeup. I am reading all your posts now, there is a lot of good stuff here. Keep up the good work
Thank you very much sir. Great stuff!
For debuging, you can test your app on google chrome or safari, and use the JS debuger (Developer tools). Of course, the call to phonegap native API won’t work.
What are the languages like Java, Javascript,HTML etc., used in PhoneGap to develop an application
Does PhoneGap really support Windows Mobile? It says so on one of their pages but not in their feature matrix. When downloading PhoneGap 1.4 there is no folder for windows mobile (The Windows one seems to be for Windows Phone). When I check the API docs it says which devices are supported for each functionality, no where can I find Windows Mobile.
Any ideas?
Did you look here? — http://phonegap.com/start#wp
I haven’t personally tried building a windows mobile app yet, but I know folks that are .
Greg