Does not load Splash for iOS in Phonegap Build

Question

Hi, I’ve tried several ways to build an app for iOS using the Phonegap Build.

The app is generated normally. First the problem was the icon, always appeared the default icon of Cordova. I was able to display the icon by moving the files to the root folder.

However this does not work for the splash, I tried several ways, both in the root folder and res/screen/android. All screens are the right size, in PNG format. Generated by Ionic.

I tried the tags <splash /> and <gap:splash /> as well as in the parameters.

However, whenever I open the app on iPad it shows me the default Phonegap splash and not the one I set in config.xml.

Here is the current config.xml:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="br.com.urbanfoodbrasil.spice" version="0.14.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
  <name>Urban Food</name>
  <description>&#xD;
        Encontre ofertas de Restaurantes perto de você.&#xD;
    </description>
  <author email="[email protected]" href="http://gabrieloliveira.net">&#xD;
      Gabriel Oliveira&#xD;
    </author>
  <content src="index.html"/>
  <access origin="*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="SplashScreenDelay" value="1000"/>
  <preference name="FadeSplashScreenDuration" value="3000"/>
  <preference name="android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="AutoHideSplashScreen" value="false"/>
  <preference name="SplashMaintainAspectRatio" value="true"/>
  <preference name="SplashReloadOnOrientationChange" value="true"/>
  <feature name="StatusBar">
    <param name="ios-package" onload="true" value="CDVStatusBar"/>
  </feature>
 
    <icon src="icon.png" width="57" height="57" platform="ios" />
    <icon src="[email protected]" width="114" height="114" platform="ios" />
    <icon src="icon-40.png" width="40" height="40" platform="ios" />
    <icon src="[email protected]" width="80" height="80" platform="ios" />
    <icon src="[email protected]" width="120" height="120" platform="ios" />
    <icon src="icon-50.png" width="50" height="50" platform="ios" />
    <icon src="[email protected]" width="100" height="100" platform="ios" />
    <icon src="icon-60.png" width="60" height="60" platform="ios" />
    <icon src="[email protected]" width="120" height="120" platform="ios" />
    <icon src="[email protected]" width="180" height="180" platform="ios" />
    <icon src="icon-72.png" width="72" height="72" platform="ios" />
    <icon src="[email protected]" width="144" height="144" platform="ios" />
    <icon src="icon-76.png" width="76" height="76" platform="ios"/>
    <icon src="[email protected]" width="152" height="152" platform="ios"/>
    <icon src="[email protected]" width="167" height="167" platform="ios"/>
    <icon src="icon-small.png" width="29" height="29" platform="ios"/>
    <icon src="[email protected]" width="58" height="58" platform="ios"/>
    <icon src="[email protected]" width="87" height="87" platform="ios"/>
    <gap:splash src="res/screen/ios/[email protected]" width="640" height="1136" gap:platform="ios"/>
    <gap:splash src="res/screen/ios/Default-667h.png" width="750" height="1334" gap:platform="ios"/>
    <gap:splash src="res/screen/ios/Default-Landscape-ipad.png" width="1024" height="768" gap:platform="ios"/>
    <gap:splash src="res/screen/ios/Default-Portrait-ipad.png" width="768" height="1024" gap:platform="ios"/>
    <gap:splash src="res/screen/ios/[email protected]" width="640" height="960" gap:platform="ios"/>
    <gap:splash src="res/screen/ios/Default-iphone.png" width="320" height="480" gap:platform="ios"/>
  
  <icon src="icon.png" />
  <!--<splash src="splash.png" />-->
  <plugin name="cordova-plugin-googleplus" spec="https://github.com/yehiasalam/cordova-plugin-googleplus#305e04d">
    <param name="REVERSED_CLIENT_ID" value="272196229900-hii9be1vfhoqqplbnqnpvf5cq1bnj5uo.apps.googleusercontent.com"/>
  </plugin>
  <plugin name="cordova-plugin-facebook4" spec="~1.7.1">
    <param name="APP_ID" value="1658166771171698"/>
    <param name="APP_NAME" value="urbanfood"/>
  </plugin>
  <plugin name="phonegap-plugin-push" spec="1.6.0">
    <param name="SENDER_ID" value="272196229900"/>
  </plugin>
  <plugin name="cordova-plugin-console" spec="~1.0.3"/>
  <plugin name="com.darktalker.cordova.screenshot" spec="0.1.5"/>
  <plugin name="cordova-plugin-device" spec="1.1.2"/>
  <plugin name="cordova-plugin-splashscreen" spec="3.2.2"/>
  <plugin name="cordova-plugin-x-socialsharing" spec="5.1.2"/>
  <plugin name="cordova-plugin-inappbrowser" spec="1.4.0" />
  
  <gap:config-file platform="ios" parent="CFBundleShortVersionString">
    <string>100</string>
    </gap:config-file>
	<platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

Does anyone have any tips on how to make it work? Thank you.

Answer 1

I was able to fix it for anyone with the same problem:

The mistake: I did not follow the Ionic documentation when generating the Splash images, which asks for a 2208px x 2208px base image. I was using a 2000px x x 2000px image. So Ionic CLI didn’t generate all splash images for iOS, and in this case, for the device I’m testing, which is an iPad 3 with Retina.

How did I find out?

Other information that I consider important. To check the splash images in the package .ipa generated, renamed the file with extension .ipa for extension .zip. I unpacked the package and was able to verify that only the screens for iPad Retina were missing (that is, for these were the Phonegap patterns). The other splash screens were there as they were generated by Ionic.

So I resized the base image to Ionic CLI, to 2208px x x 2208px. And now, it generated more splash images, to iPad Retina.

As a reference:

• You can use <gap:splash /> as only <splash />, and even the latter is the new standard, as is the documentation.
• I had searched, and in a reply on Stackoverflow.com had recommended putting the images straight into the folder: platforms/ios/<project_name>/splash. THAT’S NOT NECESSARY.
• I put the images on res/screen/ios. In the root folder, along with index.html and config.xml.
• I don’t use the same Ionic folder structure. I got the contents of the folder www of the Ionic, and pasted on another project only to the Phonegap Build. And only a root folder with index.html, and a new config.xml specific to the Phonegap Build and the splash screens in the folder res. I faced some problems using direct Ionic design, so I did it this way. It can be useful for you, or you can find a more organized way to do it, after all you need to copy the changes from the main repository to this.

Special thanks to Rodrigo Soares, who tried to help me, but his answer was not necessarily for the problem I was facing.

Answer 2

1 - Ionic has a bug when generating splashscreen and icones from a PNG. I bypassed this problem by converting the images to PSD.

2 - Place the icon.psd and splash.psd files in the Resources folder.

3 - Execute the command $ Ionic Resources

4 - Check whether new icons have been generated and whether config.xml has a reference for them.

Source: http://ionicframework.com/docs/cli/icon-splashscreen.html