Wrapping a Web App with PhoneGap - Some iOS Notes

Here are a few notes on wrapping a web app with Phonegap.  A remarkably uneventful process.  In this case, the app uses svg/D3 and has some ajax calls to load large data files - all of this worked without any additional modifications necessary, and the performance on the iPad simulator was impressive.

Not including the wait-time for my needed OS/Xcode upgrades, the whole process took about two hours total, after which I was at a point where I could focus solely on the needed html/js/css tweaks for mobile.

Afterward, I ran through this process with the Vine Finder web app that uses video and hits the twitter search api and a custom proxy server - that process took at most 10-15 minutes soup to nuts, and it seemed to run fairly well on the iPad simulator as well.

There are a few key articles that made this process so straightforward:
  • The current PhoneGap Getting Started guide for iOS 
    • you have to dip down into a terminal window to run a script to get the skeleton apps set up, but that worked without a hitch... and it reminded me of how nice it is to develop on the Mac, where a real *nix bash window is always available
  • Andrew Trice's detailed note on setting things up so that your Android and iOS projects use the same linked codebase
    • while about a year old, the screenshots are not out of date yet
  • A tweak to the MainViewControl.m file so that external links don't open within the webview hosting your app
    • if you don't do this, then the links open in the PhoneGap webview, which can cause some aggravation as your app can seem to get "stuck" on the external site
    • I can't remember the original site where I got this; there are variations floating around, and it might need more tweaks as I move along, but here's the basic thing you need to add:
  • This great note by Scott J. DeSapio on how to add iAds to your PhoneGap app
    • The web app originally used AdSense, which apparently is not allowed to be used in apps like this per Google's terms of service
    • I tweaked it so that the ad appeared at the top rather than at the bottom; here's the full method in MainViewController.m



None of this is particularly difficult, but the articles saved me a lot of time, and have allowed me to more quickly get to the trickier tweaks specific to the apps themselves.

Popular Posts