0

Olá, já tentei de várias formas fazer o build de um app para iOS utilizando o PhoneGap Build.

O app é gerado normalmente. Primeiro o problema foi o ícone, sempre aparecia o ícone padrão do Cordova. Consegui fazer exibir o ícone mudando os arquivos para a pasta raíz.

Porém isso não funciona para o splash, já tentei várias formas, tanto na pasta raíz quanto em res/screen/android. Todas as telas estão do tamanho certo, em formato PNG. Geradas pelo Ionic.

Já tentei as tags <splash /> e <gap:splash /> bem como nos parâmetros.

Porém, sempre que abro o app no iPad ele me mostra a splash padrão do Phonegap e não a que configurei no config.xml.

Aqui está o config.xml atual:

<?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>

Alguém tem alguma dica de como fazer funcionar? Obrigado.

2
  • Por que vc comentou o <!--<splash src="splash.png" />-->? Já experimentou voltá-lo? 14/09/2016 às 13:46
  • Sim, comentei justamente para ver se funcionava sem ele. 14/09/2016 às 14:39

2 Respostas 2

1

Consegui resolver, para quem tiver o mesmo problema:

O erro: Eu não segui a documentação do Ionic ao gerar as imagens de Splash, que pede uma imagem base de 2208px x 2208px. Eu estava usando uma imagem de 2000px x 2000px. Logo, o Ionic CLI não gerava todas as imagens splash para iOS, e no caso, para dispositivo que estou testando, que é um iPad 3 com Retina.

Como descobri?

Outra informação que considero importante. Para verificar as imagens splash no pacote .ipa gerado, renomeei o arquivo com extensão .ipa para extensão .zip. Descompactei o pacote e pude verificar que somente faltavam as telas para iPad Retina (ou seja, para essas estavam as padrões do PhoneGap). As outras telas splash estavam lá como foram geradas pelo Ionic.

Assim, redimensionei a imagem base para o Ionic CLI, para 2208px x 2208px. E agora, ele gerou mais imagens splash, para iPad Retina.

Como referência:

  • Você pode usar <gap:splash /> como somente <splash />, e inclusive o último é o novo padrão, assim como está na documentação.
  • Eu havia pesquisado, e em uma resposta no StackOverflow.com haviam recomendado colocar as imagens direto na pasta: platforms/ios/<project_name>/splash. Isso NÃO é Necessário.
  • Coloquei as imagens em res/screen/ios. Na pasta raiz, junto com index.html e config.xml.
  • Não uso a mesma estrutura de pastas do Ionic. Peguei o conteúdo da pasta www do Ionic, e colei em outro projeto apenas para o PhoneGap Build. E somente uma pasta raiz com index.html, e um novo config.xml específico para o PhoneGap Build e as telas splash na pasta res. Eu enfrentei alguns problemas utilizando direto o projeto do Ionic, então fiz dessa forma. Pode ser útil pra você, ou você pode encontrar uma maneira mais organizada de fazê-lo, afinal é necessário copiar as alterações do repositório principal para esse.

Agradecimento especial ao Rodrigo Soares, que tentou me ajudar, mas sua resposta não foi necessariamente para o problema que eu estava enfrentando.

0

1 - O Ionic possui um bug ao gerar splashscreen e icones a partir de um PNG. Contornei esse problema convertendo as imagens para PSD.

2 - Coloque os arquivos icon.psd e splash.psd na pasta resources.

3 - Execute o comando $ ionic resources

4 - Confira se foi gerado os novos ícones e se o config.xml possui referência para os mesmos.

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

3

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .