Software Archive
Read-only legacy content
17061 Discussions

White Screen on Android App (but not iOS version)

Mark_D_6
Beginner
1,496 Views

I updated to XDK 3240 so I could rebuild a very simple app with new icons/splash images. I had to convert the certificates but that seemed to go ok.  Other than that, nothing has changed.

Generated the Android and iOS versions. The app is really just a website launcher doing a window.open. The iOS version works exactly as before.

The Android version, however, displays the splash image for a couple seconds then a white screen. I've waited around for the website but other than a little network activity at startup there is no other activity. This did work on the previous version of XDK that I downloaded a few weeks ago.

Does XDK 3240 require any additional JS includes? Right now cordova.js, js/app.js, and xdk/init-dev.js are being included. I believe these were added when the project was created last year (I didn't create the project).

Any ideas what would cause this?

0 Kudos
1 Solution
PaulF_IntelCorp
Employee
1,464 Views

If an attempt to access any external network-based resource is happening during initialization that could cause a white-screen. Especially if it is something in your index.html file and NOT using an AJAX call. If your app is attempting to access an external resource (such as a CSS file, a JS file, fonts, etc.) those are blocking actions and will cause the entire UI to stop.

External JS files, CSS files, font files, images, etc. are not a good idea. It is better to make all those components local to your app so you do not rely on a network connection to get your app started. You should only attempt to retrieve resources over the network interface AFTER your app is started and can interact with the user.

Is it possible you are using an analytics plugin or an ad plugin that is attempting to access network resources during initialization?

If you want to "open up" your whitelist settings, to the least secure values (not recommended for published apps), do the following (first image is for index.html file, the "Content-Security-Policy" tag, second is for Android, third is for iOS, and fourth is for Windows):

Screen Shot 2016-04-25 at 8.39.57 AM.png

Screen Shot 2016-04-25 at 8.37.28 AM.png

Screen Shot 2016-04-25 at 8.37.47 AM.png

Screen Shot 2016-04-25 at 8.39.28 AM.png

View solution in original post

0 Kudos
25 Replies
Amrita_C_Intel
Employee
1,287 Views

Add this delay

For Android Crosswalk - 

<platform name="android">
    <preference name="SplashScreen" value="screen" />
    <preference name="AutoHideSplashScreen" value="true" />
    <preference name="SplashScreenDelay" value="3000" />// The delay 
    <preference name="SplashMaintainAspectRatio" value="false" />
</platform>

0 Kudos
Amrita_C_Intel
Employee
1,287 Views

Are you trying device or emulator?

0 Kudos
Mark_D_6
Beginner
1,287 Views

I'm generating the apk file and installing in on a Samsung 5s. I'm not using the emulator.

0 Kudos
Mark_D_6
Beginner
1,287 Views

I added that code but it had no effect.

0 Kudos
Amrita_C_Intel
Employee
1,287 Views

You need to increase the delay in order to see splash screen for the longer period of the time. Try removing all cache and restart the XDK.

https://software.intel.com/en-us/xdk/blog/remove-xdk-local-data

0 Kudos
PaulF_IntelCorp
Employee
1,287 Views

Try using this in the intelxdk.config.additions.xml file:

<platform name="android">
    <!-- below requires the splash screen plugin -->
    <!-- docs: https://github.com/apache/cordova-plugin-splashscreen -->
    <preference name="AutoHideSplashScreen" value="true" />
    <preference name="FadeSplashScreen" value="false"/>
    <preference name="FadeSplashScreenDuration" value="0"/>
    <preference name="SplashMaintainAspectRatio" value="false" />
</platform>

 

0 Kudos
Mark_D_6
Beginner
1,287 Views

I cleared the Intel XDK cache. Rebuilt the app. No effect.

I added the code Paul provided. Cleared the cache and rebuilt the app. No effect.

0 Kudos
Mark_D_6
Beginner
1,287 Views

This is probably a dumb question but could the default settings for the new cordova whitelist be blocking access? I've been reading about it but the app is currently using the default settings. The app does need to go to a website but I don't know where the site may take the user.

If the whitelist were blocking the app, would it show a white screen or would it throw an error/warning message?

0 Kudos
PaulF_IntelCorp
Employee
1,465 Views

If an attempt to access any external network-based resource is happening during initialization that could cause a white-screen. Especially if it is something in your index.html file and NOT using an AJAX call. If your app is attempting to access an external resource (such as a CSS file, a JS file, fonts, etc.) those are blocking actions and will cause the entire UI to stop.

External JS files, CSS files, font files, images, etc. are not a good idea. It is better to make all those components local to your app so you do not rely on a network connection to get your app started. You should only attempt to retrieve resources over the network interface AFTER your app is started and can interact with the user.

Is it possible you are using an analytics plugin or an ad plugin that is attempting to access network resources during initialization?

If you want to "open up" your whitelist settings, to the least secure values (not recommended for published apps), do the following (first image is for index.html file, the "Content-Security-Policy" tag, second is for Android, third is for iOS, and fourth is for Windows):

Screen Shot 2016-04-25 at 8.39.57 AM.png

Screen Shot 2016-04-25 at 8.37.28 AM.png

Screen Shot 2016-04-25 at 8.37.47 AM.png

Screen Shot 2016-04-25 at 8.39.28 AM.png

0 Kudos
Mark_D_6
Beginner
1,287 Views

This app is not accessing external CSS, etc. It is only doing JS window.open. The basic code is below:

document.addEventListener("deviceready", onDeviceReady, false);
var ref = window.open('http://example.com', '_blank', 'location=yes,toolbarposition=top,closebuttoncaption=Home');
ref.addEventListener('exit', onDeviceReady, false);

0 Kudos
PaulF_IntelCorp
Employee
1,287 Views

Mark -- that second line containing "window.open('http://example.com',...)" is exactly what I'm talking about. You are attempting to load an external resource during the initialization. That line is going to be executed in order to initialize the variable "ref" and it will block the JS execution (and, thus, the UI) until the window.open function can return, which won't return until the referenced paged is loaded...

0 Kudos
Mark_D_6
Beginner
1,287 Views

I see. Thanks for the explanation Paul.

0 Kudos
Mark_D_6
Beginner
1,287 Views

I have to ask. Is there a better way to do this without compromising the security? It's a really simple app but the group loves it.

0 Kudos
Mark_D_6
Beginner
1,287 Views

By the way, that did solve the problem the first time I load the app but if I go out to the home screen and tap the app it goes white screen again. So it's solved and I now have a different problem that didn't exist a couple month ago with the same code.

0 Kudos
PaulF_IntelCorp
Employee
1,287 Views

It sounds like your app is really just a front-end for a web page. If that is the case, you're always going to experience the delays of loading that page whenever you perform such an operation. The XDK can't fix that for you, that's a function of the device, the network connection, the remote site you're loading, etc.

I'm confused regarding which suggestion solved the problem, the changes to the whitelists or changing the way you are opening that external site?

If your app is simply a "bookmark" for an external site, I recommend you use this technique, instead > https://developer.chrome.com/multidevice/android/installtohomescreen

0 Kudos
Mark_D_6
Beginner
1,287 Views

It is just a convenience app to front-end the website. The original developer did it this way a couple years ago and it's worked well for them. I wasn't sure if there was a better way to do it.

Opening the white list appears to have resolved the loading, at least partly. If I leave the 'app' and come back to it, the screen is white. Didn't do that before the XDK upgrade. I'll look at the 'bookmark' example you suggested. Thanks

0 Kudos
PaulF_IntelCorp
Employee
1,287 Views

Thanks for the clarification, Mark. Makes more sense now. I suspect you may need a "pause/resume" handler to refresh the page within the app, but not absolutely sure.

0 Kudos
Mark_D_6
Beginner
1,287 Views

That "bookmark" feature looks like it will only work in Chrome browser. This function used to open a browser widow within the app because the developer had to create a way to get back from an external website. Now if a links goes off the original site I can't get back to it. Something deeper has changed. I did not expect that behavior to change.

0 Kudos
PaulF_IntelCorp
Employee
1,287 Views

I suspect the code should be changed to reference the inAppBrowser API directly, rather than using window.open. See the inAppBrowser plugin and docs for more details > https://github.com/apache/cordova-plugin-inappbrowser

0 Kudos
PaulF_IntelCorp
Employee
995 Views

BTW -- are you building this with Crosswalk or without? Curios to know if the results vary with and without Crosswalk.

0 Kudos
Reply