PhoneGap Experiments

Posted by on Jun 23, 2012

A few weeks ago, I organized Digiflare’s first internal hackathon. The ultimate goal of the hack was to create web-based apps. One of the Digiflare teams created a compelling game, therefore my product team was put to task to investigate how to put the game in market. The technology that seemed like a no brainer was PhoneGap. In the process of investigating the platform, we learned a great deal about it’s strengths and limitations:

  • PhoneGap (also known as Cordova) supports multiple mobile platforms, from iOS, Android to Blackberry & Windows Phone.
  • The way it works is that you install PhoneGap and it creates a Cordova project type in your IDE (for example, XCode, Eclipse or Windows Phone 7 SDK). It then creates a project native to the development environment you picked (for example, an Objective-C code project in XCode).
  • After building the project, a “www” folder will appear which you need to import into your Cordova project. You also have to include a Cordova .js file in your project (and your index.html file) which corresponds to the platform you are using (for compatibility)
  • Once all is said and done, you’ll see a Cordova hello world page appear in your mobile simulator, and then you can replace the index.html with your web assets.
  • Debugging in PhoneGap is a little like the movie Inception, trying to capture bugs from a platform within a platform. The PhoneGap wiki has some hints on how to go about it. The best practice we found was to test on the desktop browser of the mobile platform we were targeting. For example, if you are deploying to Windows Phone 7, test your app on the IE9 desktop browser. The rendering results will be very similar and it will be easier using the desktop browser’s built-in debugging tools.
  • preload.js doesn’t work at all – half your bitmaps will load in, half won’t. A pre-loader isn’t much use as the bitmaps will be stored locally on the mobile device. Avoid using this javascript library with PhoneGap.
  • easel.js is very inconsistent on PhoneGap. Some textures will load on the canvas, some won’t. I’d avoid using this library also.

Conclusion – if you are planning to build an app using PhoneGap, target that platform at the start of development and test continuously in the mobile simulators. If you decide to port an existing web app, evaluate the complexity and test the javascript frameworks on PhoneGap, otherwise your porting process can potentially prove to be painful.