Do not load Splash for iOS in Phonegap Build

Navigation
0

Hello, I have tried in many ways to build an app for iOS using PhoneGap Build .

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

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

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

However, whenever I open the app on the iPad it shows me the default splash of Phonegap and not the one I configured 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.

    
asked by anonymous 13.09.2016 / 18:54

2 answers

1

I was able to solve for anyone who has the same problem:

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

How did I find out?

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

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

As a reference:

  • You can use <gap:splash /> as only <splash /> , and even the latter is the new default, just as it is in documentation .
  • I had searched, and in a response on StackOverflow.com had recommended putting the images right in the folder: platforms/ios/<project_name>/splash . This is NOT required.
  • I put the images in% with%. In the root folder, along with index.html and config.xml .
  • I do not use the same folder structure as the Ionic. I picked up the contents of Ionic's www folder, and pasted it into another project just for PhoneGap Build . And just a root folder with index.html , and a new config.xml specific to PhoneGap Build and splash screens in < > res . I faced some problems using the Ionic project straight, so I did it that way. It can be useful for you, or you can find a more organized way of doing it, after all you have to copy the changes from the main repository to that.

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

    
14.09.2016 / 19:37
0

1 - Ionic has a bug in generating splashscreen and icons from a PNG. I've addressed this problem by converting the images to PSD.

2 - Put the files icon.psd and splash.psd in the resources folder.

3 - Run the $ ionic resources command

4 - Check if the new icons have been generated and if the config.xml has a reference to them.

Source: link

    
14.09.2016 / 14:55
How to create form dynamically in Delphi HTML excerpt as a parameter of a javascript function