web-dev-qa-db-fra.com

Cordova - écran blanc après splash, aucune exception dans la console

Je me suis un peu éloigné de mon application Cordova, mais je viens de faire un clone récent hier et j'ai remarqué qu'il avait les symptômes de «l'écran blanc de la mort» - l'écran de démarrage s'affiche, le programme se charge obtenir un écran vide. Quelques détails supplémentaires:

  • CLI: Cordova 6.1.1, Android 5.1.1, iOS 4.1.1
  • Je n'utilise aucun plugin spécial pour afficher un écran de démarrage - juste des éléments <splash> dans mon fichier config.xml .
  • Cela se produit à la fois dans iOS et Android, à la fois sur des versions locales et en utilisant PhoneGap Build (c'est-à-dire, le débogage et la publication).
  • Il n'y a pas d'exception de ressources manquantes dans la console, ni dans iOS (avec les outils de développement de Safari) ni avec Android (avec les outils de développement de Chrome).
  • J'ai fait un diff avec ma dernière version de travail connue , et il n'y a vraiment rien qui apparaisse. J'ai vu une référence Underscore non définie, mais j'ai appuyé ce changement et cela n'a rien résolu - je pense que je verrais l'exception dans la console, de toute façon.

Cordova/PhoneGap a-t-il fait quelque chose récemment qui pourrait en être la cause? Des idées sur la façon d'isoler celui-ci? Je suis vraiment perplexe.

androidioscordova
24
eb1

C'était moche. Il s'est avéré que était une exception en cours de lancement, mais simplement trop tôt pour que les outils de développement de navigateur le détectent (Safari, Chrome pour iOS et Android, respectivement). L'exception est apparue lorsque j'ai exécuté des tâches dans la cible du navigateur (cordova platform add browser, etc.). Cette plate-forme de navigateur est donc utile pour quelque chose, je suppose. :-)

Dans mon cas, le plugin cordova-sqlite-storage avait effectué une modification radicale de l'API qui a cassé le code lorsque j'ai tout mis à jour. La solution consistait à épingler le plug-in à une version antérieure du fichier config.xml.

Donc, leçons apprises:

  • Si vous pensez qu'une exception est générée au démarrage, vous pouvez utiliser la plate-forme du navigateur pour la localiser.
  • Épinglez vos plugins sur une version spécifique en utilisant le paramètre spec dans le fichier config.xml. Cela vous évitera des chagrins d'amour à l'avenir.
  • [une autre option de @jcesarmobile, ci-dessous] cliquer sur Actualiser dans les outils de développement du navigateur supprimera également l'exception. Agréable! 

Je reviendrai dans config.xml et épinglerai les autres éléments - et effectuerai le nettoyage comme suggéré ci-dessus. Merci encore à tous.

21
eb1

J'ai réussi à exécuter votre application, voici les étapes que j'ai suivies.

1) Vous devez d’abord déclarer les préférences pour l’écran Splash ainsi que l’emplacement du plug-in pour cet écran dans votre fichier config.xml. C'est ce que je pense que vous manquez

<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 les images de vos écrans de démarrage dans config.xml, ce que vous avez déjà fait.

Je vous suggère de conserver les images dans les dossiers de densité par défaut du projet Android (ldpi, mdpi, hdpi, xhdpi, etc.) au lieu du dossier screen/Android, car cela simplifiera la structure de votre projet.

    <!-- 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) Ajoutez Classe du plugin Splash Screen dans la structure de votre projet Android sous le paquet org.Apache.cordova.splashscreen ou installez le plugin Cordova Screen Splash Screen. 

https://cordova.Apache.org/docs/fr/3.1.0/cordova/splashscreen/splashscreen.html

4) Dernière étape et la plus importante, vous devez avoir cordova.js dans votre dossier www.

 Cordova.js in assets

Et après cela, j'ai pu exécuter votre application Web.

 enter image description here

Je suis développeur Android, je suppose que quelque chose de similaire que vous pourriez avoir besoin de faire pour iOS

6
Hitesh Sahu

J'ai eu un problème similaire lors de l'utilisation de Cordova avec ember.js. Il s'agissait de la stratégie de changement d'URL de mon application. 

Jetez un oeil sur cette réponse , cela peut être lié à votre problème.

2
ykaragol

Vous devez installer le plug-in splash-screen pour iOS et Android afin qu'il fonctionne correctement si vous ajoutez un splash dans config.xml. ou bien sans le plugin splash-screen, vous pourriez essayer de créer un écran de démarrage avec HTML, divisez votre corps en 2 parties: le contenu et la connexion. Ensuite, vous définissez l'affichage du style de contenu: aucun. Lorsque l'application est terminée, il vous suffit de définir l'affichage de l'écran de chargement: aucun et l'affichage de l'écran du contenu: bloquer ou ce que vous voulez.

Et vous manque en dessous des préférences dans votre config.xml

<preference name="SplashScreenDelay" value="3000" />
<preference name="SplashMaintainAspectRatio" value="true|false" />
<preference name="SplashShowOnlyFirstTime" value="true|false" />
2
NGB

Essayez d’ajouter cette préférence à votre fichier config.xml, c’est peut-être le problème

<preference name="AutoHideSplashScreen" value="true"/>
2
Del

Un tag <meta http-equiv="Content-Security-Policy"> manquant sur la head a provoqué un écran blanc dans mon cas.

1
Yuval A.

Mon problème était avec ES6, il fonctionne parfaitement sur iPhone et Android 6, mais ne fonctionne pas avec Android 4 et 5.

0
Fabio Campinho

J'ai cette situation et l'ai résolue.

Dans mon cas, c'était quelque chose de similaire à ce code:

$scope.images.Push({ id: i, src: "http://placehold.it/50x50" , pstb, trno});

Le code ci-dessus fonctionne bien sur Android 7.0 mais uniquement sur un écran blanc après une éclaboussure sur 4.4.4

Changé pour ceci:

$scope.images.Push({ id: i, src: "http://placehold.it/50x50", pstb: pstb, trno: trno});

Exécuter sur tous les appareils (au moins tous mes appareils)

0
Albert

J'ai ajouté ces lignes dans config.xml

<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="6000" />

J'ai aussi un écran noir quand je donne screendelay en tant que 3000. alors je suis passé à 6000.Je pense que cordova a besoin de temps pour charger vos fichiers js, css et images.

0
Vijay

Dans mon cas, j'ai accidentellement commenté la définition d'état dans app.js.

0
Priyank

1 >> Si vous pensez qu'une exception est émise au démarrage, vous pouvez utiliser la plate-forme du navigateur pour la localiser . 2 >> Épinglez vos plugins sur une version spécifique à l'aide du paramètre spec du fichier config.xml. Cela vous évitera des chagrins d'amour à l'avenir.

0
Idrish Multani

Dans mon cas, je mets une alerte avant le premier écran toujours monté.

0
Luiz Leite