Developing mobile applications with PhoneGap and JQuery Mobile
Recently there was a lot of buzz around PhoneGap. This a software framework that allows wrapping HTML5 applications into native applications for various mobile platforms (including iPhone, Android and Windows Phone). The idea of developing a mobile application for multiple platforms with a single code base is very tempting.
During the article I have still used the old name PhoneGap, but the framework has recently been open-sourced and renamed into Cordova (http://incubator.apache.org/projects/callback.html). Adobe will continue to offer a commercial version using the PhoneGap branding (http://phonegap.com/).
During the past days, I have developed a simple Todo Application using the following technologies:
- PhoneGap to wrap in into a native application.
- JQuery Mobile for the UI.
- HTML5 local storage to store the user data.
- The applications consists of 6 screens and runs completely local; it does not require internet access to function. Theoretical it should be able to run on iPhone, Android and Windows Phone, but I was only able to test on a real Windows Phone device and on the desktop versions of Firefox, Safari and Chrome. So although it was not tested on multiple devices, I don’t expect a lot of issues when running it on IOS or Android.
PhoneGap & JQuery Mobile
A second issue that I discovered was that JQuery Mobile and PhoneGap currently don’t work good together on Windows Phone 7. I was using a single HTML file per page, but the only thing that worked was either disabling the AJAX based loading of pages in JQuery Mobile or reverting to multi page HTML files. I choose for the multi page HTML files.
I hope that the page loading issue on Windows Phone will be fixed by either the PhoneGap or the JQuery Mobile developers as it is annoying.
Debugging a HTML application wrapped in PhoneGap is not possible. The only option is to test and debug it with the developer tools of desktop browsers. If something goes wrong on the mobile device in PhoneGap, the only thing you can do is using old school console log statements to figure out what is happening.
@ECHO OFF SET sourceDirectory=Html5TodoApp SET destinationDirectory=Html5TodoApp.WindowsPhone\www MKDIR %destinationDirectory%\images\ COPY "%sourceDirectory%\*.js" %destinationDirectory%\ COPY "%sourceDirectory%\*.html" %destinationDirectory%\ COPY "%sourceDirectory%\*.css" %destinationDirectory%\ COPY "%sourceDirectory%\images\*.gif" %destinationDirectory%\images\ COPY "%sourceDirectory%\images\*.png" %destinationDirectory%\images\ patch.exe "%destinationDirectory%\index.html" index.patch
The patch of my index.html file is required because for PhoneGap I have to add a reference to the cordova.js file. Something that is not possible in a regular browser. The “index.patch” is a regular patch file that saves me from having to update my index.html manually when I copy the source code to the PhoneGap project.
*** C:\Users\Pieter\Documents\Visual Studio 2010\Projects\Html5TodoApp\Html5TodoApp\index.html Thu Mar 22 17:15:13 2012 --- C:\Users\Pieter\Documents\Visual Studio 2010\Projects\Html5TodoApp\Html5TodoApp.WindowsPhone\www\index.html Thu Mar 22 17:20:51 2012 *************** *** 4,9 **** --- 4,10 ---- <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <title>Todo Demo Pieter</title> <link rel="stylesheet" href="jquery.mobile-1.1.0-rc.1.css" /> + <script src="cordova-1.5.0.js"></script> <script src="jquery-1.7.1.js"></script> <script src="jquery.mobile-1.1.0-rc.1.js"></script> <script src="todo.logic.js"></script>
Would I recommend developing mobile applications using PhoneGap? It would depend on the application. It was a little bit more difficult to develop and test everything compared to using c# and Silverlight and the performance of the interface was also less “fluent” than a native application on my Nokia Lumia 800. But the big advantage is that my application can run on multiple platforms with almost the same code and this can be important for companies that want to deploy their business application on multiple platforms.