PhoneGap and Cordova with iOS 7

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):

1. Install Xcode 5: the update is available in the App Store on your Mac.
2. 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.
3. Build your PhoneGap application as usual on the command line:

   phonegap build ios

4. 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:

function onDeviceReady() {
    if (parseFloat(window.device.version) === 7.0) {
          document.body.style.marginTop = "20px";
    }
}
 
document.addEventListener('deviceready', onDeviceReady, false);

Here is the result:

Cordova 3.1

Cordova 3.1 is expected soon (probably next week) with additional iOS 7 support:

• Update to the splashscreen plugin to better support the status bar
• Update to the Media and Media Capture plugins to handle the new Microphone access permissions
• A fix to this bug (keyboard preferences)

Topcoat

iOS 7 is another reason to take a look at Topcoat, the new CSS toolkit that I have already covered and demonstrated multiple times in this blog. Topcoat’s flat design with no gradients or shadows fits perfectly with the new aesthetics of iOS7. Topcoat is just a set of CSS styles and works with any JavaScript framework: Backbone.js AngularJS, Ember, etc.