10 Replies Latest reply on Mar 24, 2018 11:43 AM by pixellet5

    Android Whitescreen after splash

    harlekiNN

      Dear all,

      the last few days I've  searched figuratively through the whole internet, but still haven't found any solution for my problem.

      I'm new to building apps, but apparently I'm not the only one with this problem. But as I said - no solution.

       

      I'm building my app with Phonegap Build

       

       

       

       

      I'm trying to build an app, where the user gets redirected to the inappbrowser and opens my homepage with a wordpress installation.

       

      Actually it works fine, but after my splashscreen there is a white screen until the website gets loaded and I've found many explanation why it is there, but no explanation how to remove it or better to say how to hide it.

       

      Until now, I'm building only for android. So no consideration for iOS.

       

      Okay, so first of all my code: config.xml

          <preference name="permissions"                value="none"/>
      
      
          <!-- Customize your app and platform with the preference element. -->
      <preference name="orientation"                value="default" />        <!-- all: default means both landscape and portrait are enabled -->
      <preference name="target-device"              value="universal" />      <!-- all: possible values handset, tablet, or universal -->
      <preference name="fullscreen"                 value="true" />           <!-- all: hides the status bar at the top of the screen -->
      <preference name="webviewbounce"              value="true" />           <!-- ios: control whether the screen 'bounces' when scrolled beyond the top -->
      <preference name="prerendered-icon"           value="true" />           <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->
      <preference name="stay-in-webview"            value="false" />          <!-- ios: external links should open in the default browser, 'true' would use the webview the app lives in -->
      <preference name="ios-statusbarstyle"         value="black-opaque" />   <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->
      <preference name="detect-data-types"          value="true" />           <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->
      <preference name="exit-on-suspend"            value="false" />          <!-- ios: if set to true, app will terminate when home button is pressed -->
      <preference name="AutoHideSplashScreen" value="false" />
      <preference name="SplashScreenDelay" value="90000" />
      <preference name="FadeSplashScreenDuration" value="1000" />
      <preference name="SplashScreen" value="screen" />
      <preference name="ShowSplashScreen" value="true" />
      <preference name="ShowSplashScreenSpinner" value="false" />
      <preference name="SplashShowOnlyFirstTime" value="false" />
      <preference name="FadeSplashScreen" value="true" />
      <preference name="disable-cursor"             value="auto" />          <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->
      <preference name="android-installLocation"    value="auto" />  
      
      
      
      

       

      <plugin name="cordova-plugin-inappbrowser" />
      <plugin name="cordova-plugin-splashscreen" 
      <icon src="icon.png" />
      
      
          <icon src="res/icon/android/icon-48-mdpi.png"   gap:platform="android"    gap:qualifier="mdpi" />
          <icon src="res/icon/android/icon-72-hdpi.png"   gap:platform="android"    gap:qualifier="hdpi" />
          <icon src="res/icon/android/icon-96-xhdpi.png"  gap:platform="android"    gap:qualifier="xhdpi" />
      
      <splash src="res/screen/android/splash.png" />
      
      <platform name="android">
          <splash src="res/screen/android/screen-ldpi-portrait.png"       platform="android" qualifier="port-ldpi" />
          <splash src="res/screen/android/screen-mdpi-portrait.png"       platform="android" qualifier="port-mdpi" />
          <splash src="res/screen/android/screen-hdpi-portrait.png"       platform="android" qualifier="port-hdpi" />
          <splash src="res/screen/android/screen-xhdpi-portrait.png"      platform="android" qualifier="port-xhdpi" />
      </platform> 
      
      

       

       

      index.html

          <body>
       <script type="text/javascript" charset="utf-8">
                      document.addEventListener("deviceready", onDeviceReady, false);
      
      
                      function onDeviceReady() {
      
                          var ref = window.open(encodeURI('http://wasgehtwann.de'), '_blank', 'location=no');
                      }
                  </script>
            <script type="text/javascript" src="cordova.js"></script>
              <script type="text/javascript" src="js/index.js"></script>
      
      
          </body>
      

       

       

      My thought was to disable the autohide splashscreen with  <preference name="AutoHideSplashScreen" value="false" /> and hide it with

       

       

      setTimeout(function() {
      navigator.splashscreen.hide();
      }, 2000);
      

       

      but apparently this works only in iOS.

       

      Is there a similar solution how to hide the whitescreen after the splashscreen on android?

       

      Best wishes from Germany,
      Lukas