Here at Blueleaf we're always looking for the latest new technology and we're rather excited about something called PhoneGap - one of our senior web developers Pete explains why.

If you haven't heard about PhoneGap, in a nutshell it gives you the ability to build an app as you would a website. So, think of PhoneGap as being a "chrome-less" web browser that displays HTML5, CSS and JavaScript content, where "chrome-less" is a term to describe the look of a website without the address bar, bookmarks and navigation that a normal web browser would display. A little bit like the view when you press the full screen button.

With this in mind, PhoneGap enables application build using HTML5, CSS and JavaScript to take advantage of the full screen of the device and is a great way for a web developer to get involved in app development. Further information on PhoneGap can be found here.


When would you use PhoneGap?

From our experience, we'd say that apps providing information about a service, product or event are perfect for PhoneGap, where you can do 99% of what you can do on the web without any problems at all.

One great feature of PhoneGap is that it allows integration with the iOS Accelerometer. A simple example of this would be to create a game with the objective of moving a ball around the screen by tilting the device. This can be done by hooking into the Accelerometer and using a little Javascript. Further information on this can be found here.


Tips for using PhoneGap

PhoneGap is great as long as you keep it simple. The more things you add, the more memory that the little app will begin to use on the device and if you're not careful, crashes will start occurring. A good thing to remember is that you are still limited by the web technologies on which the app is based, so it's best to avoid any heavy graphics processing or highly interactive features.

It's recommended to use as much CSS3 as possible for animations and transitions and the less JavaScript you use the better, as the devices have a limited amount of memory allocated to JavaScript and if you hit it, then the app will crash.

If your app seems sluggish, try getting some more power by using Hardware Acceleration. Adding “webkit-transform: translateX(0)” to the CSS will trigger this because translateX is used for 3D animation. It doesn't always work (can make it even slower) but it's worth a shot.

Another quick tip is that if you want to hide the Quicktime logo when videos are loading on an iPhone or iPad, here's the answer. I exhausted almost every idea and forum possible but in the end I used translateX again but this time with the addition of a little bit of jQuery. When the video isn't playing, use “webkit-transform:translateX(-2048px)” to hide it off screen. Then detect when the video is playing and send it back, try this as it works a treat -

[javascript] function adjustVideo(videoblock) {

//When this function is called we'll shift the video element 2048px to the left.

$(videoblock).css("-webkit-transform", "translateX(-2048px)");

//We now wait and listen for the video to begin playing.

$(videoblock).bind("play", function () {

//Once it starts playing we shift the video element back over to the right.

$(videoblock).css("-webkit-transform", "translateX(0)");

}); } [/javascript]


Remember that the principle behind PhoneGap is that it’s essentially a website that makes the user believe it's an app. As such, the end user will expect app-like features and performance. The expectation is in the eye of the beholder; show them a website and they will expect a delay while the pages load, show them an app and they expect multimedia activities to happen instantly. Trying to explain problems such as slowness and lag to an end user (or client) when an app looks like an app but isn't actually an app, is a tough challenge.

PhoneGap has its uses but it’s not a native app.  Before deciding to use it, assess the requirements of your app carefully before diving in. Don't be lured into a false sense of security just because you know how to develop for the technology behind PhoneGap (HTML, CSS, JS).  It might not be possible to make your app as awesome as you (or your client) would like using PhoneGap, you might just have to go native. But PhoneGap is certainly worth considering.

To be continued...