web-dev-qa-db-fra.com

L'application iOS PhoneGap Build a un écran blanc après l'écran de démarrage

J'utilise PhoneGap Build 3.0, en essayant de me débarrasser de l'écran blanc qui apparaît après l'écran de démarrage.

J'ai fait des recherches et tout ce que je peux trouver, ce sont des références à PhoneGap et Cordova, pas à PhoneGap Build. Aucune des choses que j'ai essayées n'a fonctionné - principalement en désactivant le masquage automatique de l'écran de démarrage et en le masquant automatiquement avec JavaScript:

Dans le fichier config.xml:

<feature name="SplashScreen">
    <param name="ios-package" value="CDVSplashScreen" />
    <param name="onload" value="true" />
</feature>

Dans index.html:

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
        window.location.href = mysite.com

        document.AddEventListener("deviceready", OnDeviceReady, false);

        function OnDeviceReady() {
            setTimeout(function() { 
                navigator.splashscreen.hide();
            }, 6000);
        };
    </script>

Mais cela semble m'ignorer et masquer automatiquement l'écran quand même. J'imagine que c'est parce que cette solution ne concerne pas PhoneGap Build, mais je ne sais pas comment le résoudre.

javascriptiosphonegap-build
21
Daniel Miller

Totalement sentir votre douleur à ce sujet. Les docs de PhoneGap Build nécessitent beaucoup de travail ... Je me suis déjà battu contre cela ces derniers jours. Après de nombreux essais et erreurs, voici ce qui a fonctionné pour moi.

Dans config.xml: 

<!-- Do not auto hide splash on iOS -->
<preference name="AutoHideSplashScreen" value="false" />
<!-- Do not auto hide splash on Android -->
<preference name="SplashScreenDelay" value="10000"/>

<gap:plugin name="org.Apache.cordova.splashscreen" />

Android ne semble pas avoir de paramètre AutoHide, nous lui accordons donc un long délai. Nous allons le cacher manuellement avec JS avant que ces 10 secondes soient atteintes.

L'ajout de la référence de plug-in dans le fichier config.xml est nécessaire pour que le code javascript navigator.splashscreen.hide(); fonctionne.

En outre, j'ai constaté pour mon projet (à l'aide de Kendo UI Mobile) qu'aucun délai de setTimeout n'était nécessaire dans onDeviceReady. Je suppose qu’une fois que vous aurez les bons paramètres dans votre fichier config.xml, vous verrez la même chose dans votre application.

Ma onDeviceReady ressemble à ceci:

document.addEventListener('deviceready', function() {
  navigator.splashscreen.hide();
});

Testé sur iOS 6 et Android 4.1 à l'aide de PhoneGap Build 3.1.

40
Bart

Je veux ajouter que j'avais un problème similaire et que dans mon cas, ce n'était pas l'écran de démarrage.

Dans mon cas, à l'aide de PhoneGap build et de Git, j'ai ajouté un fichier javascript à mon application mais je n'ai pas réussi à inclure et à transférer le nouveau fichier dans mon référentiel git. Cela a provoqué le fonctionnement local de l'application, mais lorsque le serveur de génération a extrait le dernier code, l'écran blanc de la version PhoneGap a été affiché.

PhoneGap s'est initialisé, mais Kendo UI n'a pas aimé la classe js référencée manquante et a échoué. C’était une erreur de PhoneGap noob, mais je souhaite le partager, car il aide une personne confrontée à un problème similaire et le correctif de l’écran de démarrage ne fonctionne pas. Il pourrait s'agir d'une erreur javascript avant le chargement de votre infrastructure d'interface utilisateur mobile.

8
Jim Harkins

Si vous utilisiez un plugin de liste blanche pour votre application, vous devrez peut-être modifier le fichier config.xml comme suit pour pouvoir utiliser phonegap build.

<gap:plugin name="cordova-plugin-whitelist" source="npm" version="~1" />

C'était la spécification cli dans mon config.xml.

<preference name="phonegap-version" value="cli-5.2.0" />
1
KrIsHnA

Essayez de définir la couleur d'arrière-plan, sur les configs et le HTML. Exemple bleu:

<preference name="SplashMaintainAspectRatio" value="false" />
<preference name="SplashScreenDelay" value="1" />
<preference name="backgroundColor" value="0xff0000ff" />

et sur le tag html 

<html style="background-color:#0000ff;>
1
Miguel

J'avais un problème similaire uniquement sur iOS et dans mon cas, il était lié à la façon dont j'ai appliqué les styles sur index.html . Dans mon cas, je devais fournir un style pour différentes marques et cela dépendait de $ scope variable. J'ai utilisé @import inside body et apparemment, iOS a un problème avec cela. Je l'ai résolu en remettant les liens CSS dans head . J'ai utilisé $ rootScope et ng-if pour déclencher des styles corrects basés sur le nom de la marque. D'une manière ou d'une autre, c'était avec @import il en résultait un écran blanc après écran d'accueil ... J'espère que cela pourra aider quiconque ayant le même problème.

0
CodeGems

J'ai le même problème "écran blanc après écran de démarrage". Pour une raison quelconque, j'ai reçu ce message dans le journal de débogage de l'émulateur iOS: 

deviceready has not fired after 5 seconds

Il a été résolu en supprimant cette balise META de mon index.html

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

Maintenant, il fonctionne sous iOS (pas testé sous Android). Référence n ° 1 ici!

C'est aussi la documentation de cordova-plugin-splashscreen. (recherchez "iOS Quirk:"). Référence n ° 2 ici!

0
Jzapata

Ce sont les étapes 

1) Ajouter les préférences pour l’écran Splash dans config.xml

<preference
    name="SplashScreen"
    value="screen" />
<preference
    name="AutoHideSplashScreen"
    value="true" />
<preference
    name="SplashScreenDelay"
    value="5000" />

<feature name="SplashScreen" >
    <param
        name="Android-package"
        value="org.Apache.cordova.splashscreen.SplashScreen" />

    <param
        name="onload"
        value="true" />
</feature>

2) Déclarez vos écrans de démarrage dans config.xml

    <!-- you can use any density that exists in the Android project -->
    <splash
        density="land-hdpi"
        src="res/drawable-land-hdpi/splash.png" />
    <splash
        density="land-ldpi"
        src="res/drawable-land-ldpi/splash.png" />
    <splash
        density="land-mdpi"
        src="res/drawable-land-mdpi/splash.png" />
    <splash
        density="land-xhdpi"
        src="res/drawable-land-xhdpi/splash.png" />
    <splash
        density="port-hdpi"
        src="res/drawable-hdpi/splash.png" />
    <splash
        density="port-ldpi"
        src="res/drawable-ldpi/splash.png" />
    <splash
        density="port-mdpi"
        src="res/drawable-mdpi/splash.png" />
    <splash
        density="port-xhdpi"
        src="res/drawable-xhdpi/splash.png" />
</platform>

3) Enfin, ajoutez cette classe dans la structure de votre projet Android dans le package org.Apache.cordova.splashscreen

ou 

installez-le en tant que plugin Cordova.

0
Hitesh Sahu