21

I'm using PhoneGap Build 3.0, attempting to get rid of the blank white screen that appears after the splash screen.

I've done research and all I can find is references to PhoneGap and Cordova, not PhoneGap Build. None of the things I've tried have worked--mainly, disabling the auto splash screen hide, and hiding it automatically with JavaScript:

In the config.xml:

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

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

But this appears to ignore me and auto-hide the screen regardless. I assume this is because this solution is not for PhoneGap Build, but I'm not sure how else to go about fixing this.

Daniel Miller
  • 2,409
  • 4
  • 19
  • 20

7 Answers7

42

Totally feel your pain on this. The docs for PhoneGap Build need a lot of work. I've been fighting with this the last couple of days myself. After much trial and error, this is what has worked for me.

Within 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 does not seem to have an AutoHide param, so we just give it a long delay. We will hide it manually with JS before this 10 seconds is reached.

Adding the plugin reference in the config.xml is needed for the javascript code navigator.splashscreen.hide(); to work.

Also, I found for my project (using Kendo UI Mobile) that no setTimeout delay was needed within onDeviceReady. I am guessing, that once you get the correct params within your config.xml, you will see the same in your app.

My onDeviceReady looks like this:

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

Tested on iOS 6, and Android 4.1 using PhoneGap Build 3.1.

Bart
  • 6,694
  • 6
  • 43
  • 53
  • This is the answer. I was missing the – Daniel Miller Dec 05 '13 at 19:25
  • I didn't realize that either. Had to bang my head into the wall a few dozen times before it revealed itself. – Bart Dec 05 '13 at 19:27
  • @Bart I can't get this to work on my project. Already have the same settings on config.xml and I even try to forcefully show the splashscreen (navigator.splashscreen.show() on deviceready event) but it's still showing the stupid white screen :( – GantengX Feb 18 '14 at 02:16
  • @Bart btw I noticed that this only happens on iPhone 3.5", it works fine on 4".. dafuq – GantengX Feb 18 '14 at 05:14
  • As a side note, just tried and tested this on android 4.4 device, if you're developing just for android you don't need the plugin link or code, there's no auto hide feature because the `SplashScreenDelay` automatically hides the splash screen. – Juan Carlos Alpizar Chinchilla Mar 21 '14 at 00:10
  • Thanks Bart, Wish I had seen this answer first.. Spent several hours on this issue.. – Raja Yogan Aug 06 '15 at 09:58
  • I have tried all the possibilities but still I get a blank splash screen in iphone6s but it works for 5c – bvakiti Aug 02 '16 at 06:55
8

I want to add that I had a similar issue and in my case it was not the splash screen.

In my case using PhoneGap build and Git, I added a javascript file to my app but failed to include and push the new file to my git repository. This caused my the app to work locally but when the build server pulled the latest code, it showed the white screen on the PhoneGap build.

PhoneGap initialized, but Kendo UI did not like the missing referenced js class and failed. It was a PhoneGap noob mistake but i want to share just incase it helps someone who has a similar issue and the splash screen fix does not work. It could be a javascript error occurring before your mobile ui framework loads.

Jim Harkins
  • 383
  • 4
  • 15
  • Thanks! This comment helped me understand that my bug was probably in the javascript and not in the xml or ios code! Much appreciated! – Mr. T Apr 18 '14 at 20:56
  • This helped me debug it as well. My issue was that I'm using the Ratchet library as the foundation for the UI and it set the body and .content css styles automatically and the bg color happened to be white. The problem went away when I changed it to black. – DemitryT Jun 29 '14 at 13:00
1

If you were using whitelist plugin for your app, you may need a change in config.xml as follows to work with phonegap build.

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

This was the cli spec in my config.xml.

<preference name="phonegap-version" value="cli-5.2.0" />
Midhun KM
  • 1,647
  • 1
  • 21
  • 31
1

Try set the background color, on the configs and html. Example blue:

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

and on the html tag 

<html style="background-color:#0000ff;>
Miguel
  • 3,349
  • 2
  • 32
  • 28
0

This are the steps

1) Add Splash screen preference in 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) Declare your splash screens in 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) Finally Add this class into your android project structure under org.apache.cordova.splashscreen package

or

install it as Cordova plugin.

Hitesh Sahu
  • 41,955
  • 17
  • 205
  • 154
0

I had similar issue only on iOS and in my case it was related to the way I implemented styles on index.html. In my case I had to provide styling for different brands and it was dependent on $scope variable. I used @import inside body and apparently iOS has a problem with it. I solved it by putting CSS links back to head. I used $rootScope and ng-if to trigger correct styles based on brand name. Somehow it was with @import it resulted with blank white screen after splash screen... I hope it can help anyone having same problem.

CodeGems
  • 549
  • 4
  • 16
0

I have the same problem "blank white screen after splash screen". For some reason I got this message in emulator iOS debug log: 

deviceready has not fired after 5 seconds

It was resolved removing this meta tag from my index.html

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

Now it is working in iOS (No tested in android). Reference #1 here!

Also this is the documentation of cordova-plugin-splashscreen. (search for "iOS Quirk:"). Reference #2 here!

Jzapata
  • 2,442
  • 1
  • 12
  • 9