Category Archives: Mobile

PhoneGap & iOS — Build Submission Pains

If you’re using PhoneGap and submitting builds to the iOS App Store there’s a pretty good chance you’ve gotten an email back from them saying something along the lines of…

Your binary is not optimized for iPhone 5 – – New iPhone apps and app updates submitted must support the 4-inch display on iPhone 5 and must include a launch image referenced in the Info.plist under UILaunchImages with a UILaunchImageSize value set to {320, 568}. Launch images must be PNG files and located at the top-level of your bundle, or provided within each .lproj folder if you localize your launch images. Learn more about iPhone 5 support and app launch images by reviewing the ‘iOS Human Interface Guidelines’ at <https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW5&gt; and the ‘iOS App Programming Guide’ at <https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/App-RelatedResources/App-RelatedResources.html#//apple_ref/doc/uid/TP40007072-CH6-SW12&gt;.

Or

Missing Info.plist key – This app attempts to access privacy-sensitive data without a usage description. The app’s Info.plist must contain an NSPhotoLibraryUsageDescription key with a string value explaining to the user how the app uses this data.

From a PhoneGap point of view, both of these messages left me with a “The Fuck?” look on my face, many, many times. However, they’re actually very easy to deal with IF you know what needs to be updated in the config.xml of your PhoneGap application.

Error 1

The first TLDR message occurs because a splash screen is missing. When you first launch a PhoneGap app, it’ll use the default PhoneGap Splash Screen. However, when you add your own, if you don’t add them all correctly you’ll get something like this error. Here are the things in my config that help me rid of this error:

<gap:plugin name="cordova-plugin-splashscreen" source="npm" />
<preference name="SplashScreenDelay" value="2000" />
<preference name="SplashMaintainAspectRatio" value="false" />
<splash src="res/splash/splash@2x.png" />
<splash src="res/splash/ios/320x480.png" gap:platform="ios" width="320" height="480" />
<splash src="res/splash/ios/640x960.png" gap:platform="ios" width="640" height="960" />
<splash src="res/splash/ios/640x1136.png" gap:platform="ios" width="640" height="1136" />
<splash src="res/splash/ios/768x1024.png" gap:platform="ios" width="768" height="1024" />
<splash src="res/splash/ios/1024x768.png" gap:platform="ios" width="1024" height="768" />
<splash src="res/splash/ios/1536x2008.png" gap:platform="ios" width="1536" height="2008" />
<splash src="res/splash/ios/1536x2048.png" gap:platform="ios" width="1536" height="2048" />
<splash src="res/splash/ios/2048x1496.png" gap:platform="ios" width="2048" height="1496" />
<splash src="res/splash/ios/2048x1536.png" gap:platform="ios" width="2048" height="1536" />

Make sure that each and every file is a separate file with the dimensions specified. The first image listed as splash@2x.png is a 640×960 file and IN THEORY replaces any sizes you may have missed by leaving off the dimension attributes… this has not been the case in my testing so include them all.

Error 2

So this is something that I’ve only recently seen pop up when using PhoneGap builds and its due to an iOS requirement that when you need access to something on the phone then you have to supply a string describing why. This makes sense if you’re in XCODE and have the info.plist file on hand… but it wasn’t so obvious looking at it with PhoneGap. Another addition to the config file will clear this error up:

<gap:config-file platform="ios" parent="NSPhotoLibraryUsageDescription">
 <string>This app requires access to the PhotoLibrary to allow the user to select an image to use as their profile picture. </string>
 </gap:config-file>

using a <gap:config-file> element with the platform listed as either iOS or Android will allow you add items to either the iOS’s info.plist or Android’s manifest.xml respectively. the plist file is really just an XML property file like a .csproj is to Visual Studio. So since the property we want to add a string to  in the plist is named “NSPhotoLibraryUsageDescription”, the parent property on the gap:config-file element contains this string. Inside <gap:config-file> is the actual <string> for describing what your app uses that permission for.

Error 3

Wait – There wasn’t a third error, was there?!?! No, this one isn’t exactly an error but it is a WTF moment. If your icon shows up correctly when installed, but iTunes Connect doesn’t display the correct icon for the builds, this is another config.xml fix ( I wouldn’t dare submit the build for review while the icon was wrong on the builds as I would guess it would show up somewhere else incorrect ). Make sure to have the following in your config:

 <platform name="ios">
   <icon src="res/icon/icon.png" />
   <icon height="57" src="res/icon/ios/icon.57.iOS.png" width="57" />
   <icon height="72" src="res/icon/ios/icon.72.iOS.png" width="72" />
   <icon height="114" src="res/icon/ios/icon.114.iOS.png" width="114" />
   <icon height="120" src="res/icon/ios/icon.120.iOS.png" width="120" />
   <icon height="144" src="res/icon/ios/icon.144.iOS.png" width="144" />
 </platform>

Now here, where the SplashScreen didn’t seem to get overridden… the icon without dimensions has been the only thing to show correct on the builds while the icons with dimensions show correct on the phone itself.