Phonegap / HTML5 dabblings

Recently a client asked us to develop an app for number of mobile platforms.
The app had some form fields, had to capture photo’s using the camera and send an email with the photo as an attachment and the form fields as data. Lastly the app had to get the location and add it to the data.

A year or two ago we tried HTML5 and Phonegap and found it buggy and unusable for serious development, but we have steadily been using more and more HTML5 elements in our Apps. Hybrid Apps (native apps with native UI screens in some parts and HTML5 screens in other parts) allow you to port the web parts easily from iPhone to Android or vice versa. Since the HTML5 buzz has been picking up this year i decided to give Phonegap a try. The phonegap support organization was acquired by Adobe last year coinciding neatly with the demise of flash-mobile. So phonegap has serious clout behind it. Something i wonder about with the other 100 or so web-to-app products.

If the client agrees at some point i might post the code and screenshots.

The good
From Phonegap newbie to up-and-running developer in 2 hours. The download for iOS worked as expected. Within half a day i managed to change the sample code to something resembling a prototype for my app. Pretty cool. I added JQuery Mobile for some instantly cool user interface widgets. Calling the camera and location services was well documented. The location services did what i wanted out of the box. The camera call took a little tweaking and then the camera view opened up on device.

The bad

I figured out how to get a mailto link running in 5 minutes, but I needed to add an attachment to the email. That was where the problems started. Phonegap currently has no support for that (or its not documented). So i have to create a plug-in which was a level of complexity harder than any of the UI. The plug-in requires doing some javascript and some objective-c, then getting the two to work together well. Because iOS has no proper support for web to native calls this is quite clunky and it is not immediately obvious how to register the plug-in in phonegap. I was hoping to stick to HTML5, but now i need a developer that is fluent in native code as well.

Debugging is a little difficult because errors are not reported on the console. After staring at a bug for a while i decided to put the whole thing in firefox and use firebug to find the bug in my javascript code. Javascript tools don’t seem to be as well rounded as xcode for iOS or eclipse for Android (but anyone who knows an excellent javascript debugging tool is welcome to correct me).

Because the app is essentially a web page running from a local file, that means that if you retreive content off the web, you are mixing two web sites into your page. Phonegap/HTML5 therefore is inherently vulnerable to cross site scripting. There is documentation about how to avoid cross site scripting in Phonegap, but the devil is in the playground so to speak. Potentially an attacker can insert malicious phonegap-javascript code into a web response and using convenient javascript functions can return the entire content of the app to a server (including the data / sessions  in it). I wouldn’t be surprised if an attacker is able to extract phone information as well.

The ugly

The real problems started when we tried the camera. First time it worked, second time the app crashed. It not only crashed, but would not start up again. The xcode console showed memory warnings but no clues to the cause. Only after restarting the phone would the app start again. The camera worked again for 5 or 6 times then the App crashed again. After some googling it became clear that lots of developers had encountered the same thing. The root cause seems to be in the webkit browser implementation. The camera image is received by the javascript runtime in the browser but the memory allocated for datastructures or files used in javascript is too small (or the image is too large).  Therefore the entire webkit infrastructure crashes. The real problem is that there is no workaround. So our project has suddenly come to a dead html5 end. We have to wait for Apple and Google to fix the browser implementation.

For our intended use, phonegap and HTML5 are not there yet. If we hadn’t done a proof of concept we would have run into serious problems during development. But for many apps Phonegap/HTML5 it is a feasible development strategy. The trick is in deciding which apps can be succesfully developed in phonegap/HTML5 and avoiding the “If you’ve got a hammer everything looks like a nail” bias. Phonegap and HTML5 are pushing mobile webbrowser limits and it is important not to unwittingly end up on the bleeding edge of this technology.

Update: Today i updated the iOS device to the latest version (5.1.1) and the camera function works without problems. Seems like the camera function is severely buggy in 5.0.x iOS versions, but works in the latest iOS. So Apple have fixed their webkit bug. Although this still rules out production use for a while until iOS 5.0.x can safely be ignored, it gives hope for the future of camera enabled HTML5 apps on iOS. When i find time, i’ll try on a couple of Android devices.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s