Now that it’s officially available, I wanted to share my experience running and building PhoneGap / Cordova applications on iOS 7.
Running Existing Apps
The first thing I tried to do after the upgrade process was to run the existing PhoneGap applications already installed on my phone. Good news: They run “as is” (with a minor cosmetic issues: see below).
Building and Deploying
Building and deploying new apps was also pretty straightforward. Here are the steps (I’m assuming PhoneGap 3):
Install Xcode 5: the update is available in the App Store on your Mac.
Start Xcode 5 before building your application to make sure Xcode downloads the required components. Before you can build a project using the PhoneGap or Cordova command line tool, you’ll also have to accept the new license agreement in Xcode 5.
Build your PhoneGap application as usual on the command line:
phonegap build ios
Open the project (the .xcodeproj file in platforms/ios) in Xcode, and run it on your device.
The Status Bar Issue
On iOS7, all the applications are running full screen, and the status bar now overlays your application. As a result, it may cover some of your content or interfere with your header:
Different solutions have been discussed in the forums (here and here). Some of them involve native code to offset the web view. I think the simplest and cleanest solution is to add a 20px top margin to the document’s body using CSS. You can use version detection to avoid adding the margin if the application is running on iOS 6. Shazron posted a nice Gist with a simple solution: