2 Replies Latest reply on Aug 4, 2016 10:48 AM by johnk88542902

    iOS Splashscreens. Compulsary? Do I need plugin?

    johnk88542902

      Hello, I was wondering if you could let me know if Splashscreens are compulsary for iOS? I'd rather turn them off but I can't see how to do it.

       

      <preference name="phonegap-version" value="cli-6.2.0" />

       

      If I use this:

      <plugin name="cordova-plugin-splashscreen" source="npm" version="3.2.2" />

      <splash src="splash.png" /> <!-- my image -->

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

      <preference name="SplashScreenDelay" value="0" />

      <preference name="FadeSplashScreenDuration" value="0"/>

      <preference name="ShowSplashScreenSpinner" value="false"/>

       

      then I see the default PhoneGap splashscreen hang and never disappear on iOS. It's stuck on the splashscreen.

       

      If I don't use the cordova-plugin-splashscreen then I get the default PhoneGap splashscreen which stays for a few seconds.

       

      Should I NOT use the plugin but still create the iOS launch images? Or would rolling back to a previous version of phonegap improve my chances?

       

      Thank you.

        • 1. Re: iOS Splashscreens. Compulsary? Do I need plugin?
          VectorP Level 4

          For iOS, splashes (Apple calls them Launch Images) are required. They also determine proper scaling, so they must be of dimensions as documented by Apple.

           

          You need both the splashscreen plugin and (for iPad) the statusbar plugin.

          1 person found this helpful
          • 2. Re: iOS Splashscreens. Compulsary? Do I need plugin?
            johnk88542902 Level 1

            Thank you, VectorP. This really helped.

             

            For anybody having difficulty with SplashScreens and Icons here are my config.xml settings (plus notes below):

             

            <preference name="phonegap-version" value="cli-6.2.0" />

             

            <plugin name="cordova-plugin-splashscreen" source="npm" version="3.2.2" />

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

            <preference name="SplashScreenDelay" value="3000" />

            <preference name="FadeSplashScreenDuration" value="500"/>

            <preference name="ShowSplashScreenSpinner" value="false"/>

             

            <platform name="android" >

                <icon src="images/icon-36x36.png" qualifier="ldpi" />

                <icon src="images/icon-48x48.png" qualifier="mdpi" />

                <icon src="images/icon-72x72.png" qualifier="hdpi" />

                <icon src="images/icon-96x96.png" qualifier="xhdpi" />

                <icon src="images/icon-144x144.png" qualifier="xxhdpi" />

                <icon src="images/icon-192x192.png" qualifier="xxxhdpi" />

                <splash src="images/splash-320x480.png" qualifier="port-mdpi"/>

                <splash src="images/splash-480x800.png" qualifier="port-hdpi"/>

                <splash src="images/splash-720x1280.png" qualifier="port-xhdpi"/>

                <splash src="images/splash-960x1600.png" qualifier="port-xxhdpi"/>

                <splash src="images/splash-480x320.png" qualifier="land-mdpi"/>

                <splash src="images/splash-800x480.png" qualifier="land-hdpi"/>

                <splash src="images/splash-1280x720.png" qualifier="land-xhdpi"/>

                <splash src="images/splash-1600x960.png" qualifier="land-xxhdpi"/>       

            </platform>

             

            <platform name="ios" >       

                <icon src="images/icon-29x29.png" width="29" height="29" />

                <icon src="images/icon-40x40.png" width="40" height="40" />

                <icon src="images/icon-50x50.png" width="50" height="50" />

                <icon src="images/icon-57x57.png" width="57" height="57" />

                <icon src="images/icon-58x58.png" width="58" height="58" />

                <icon src="images/icon-76x76.png" width="76" height="76" />

                <icon src="images/icon-80x80.png" width="80" height="80" />

                <icon src="images/icon-87x87.png" width="87" height="87" />

                <icon src="images/icon-100x100.png" width="100" height="100" />

                <icon src="images/icon-114x114.png" width="114" height="114" />

                <icon src="images/icon-120x120.png" width="120" height="120" />

                <icon src="images/icon-144x144.png" width="144" height="144" />

                <icon src="images/icon-152x152.png" width="152" height="152" />

                <icon src="images/icon-167x167.png" width="167" height="167" />

                <icon src="images/icon-180x180.png" width="180" height="180" />

                <splash src="images/splash-320x480.png" width="320" height="480" />

                <splash src="images/splash-640x960.png" width="640" height="960" />

                <splash src="images/splash-640x1136.png" width="640" height="1136" />

                <splash src="images/splash-750x1334.png" width="750" height="1334" />

                <splash src="images/splash-768x1024.png" width="768" height="1024" />

                <splash src="images/splash-1024x768.png" width="1024" height="768" />

                <splash src="images/splash-1242x2208.png" width="1242" height="2208" />

                <splash src="images/splash-1536x2048.png" width="1536" height="2048" />

                <splash src="images/splash-2048x1536.png" width="2048" height="1536" />

                <splash src="images/splash-2208x1242.png" width="2208" height="1242" />

            </platform>

             

            Notes:
            1. Images all reside in www/images

            2. I also added a icon.png (512x512) and splash.png (720x1280) to the www folder.
            3. For iOS to prevent the app from freezing at the launch image I added this to the body tag of my index.html file:
            <body onload="onLoad()">
            and also added this code to my JS

            function onLoad() {

                document.addEventListener('deviceready', onDeviceReady, false);

            }

            function onDeviceReady() {

                window.setTimeout(function () {

                    navigator.splashscreen.hide();

                }, 2500); // 2500 from figures set in config.js

            }

            1 person found this helpful