Develop Reference

Ionic App - Cordova build - Intel XDK - Showing white screen after splash

I am having problem in resolving the white screen in the ionic mobile app.
I followed the below steps:
Ionic Start
Project Name: Test
Framework: Angular
Starter template : conference | A kitchen-sink application that shows off all Ionic has to offer
Ionic Serve : This is executing successfully and app is successfully in browser
Build the cordova app to create www folder:
ionic cordova prepare android
ionic build cordova
This creates the www folder
Then i am using Intel XDK tool : To create the package
Then i am using https://build.phonegap.com/ to create the .apk
.apk is successfully created
Once i install the app in android mobile phone : App is opening and splash screen is shown successfully
12: But the issue is after splash screen, i am seeing white screen and nothing is happening after that
My config.xml has below info:
The same config file if used in ionic 2, it is working fine.
Please help.
Config.XML Message is as below:
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android" android-versionCode="1" version="0.0.1" id="com.test.game"  >
<!-- This file was generated by the Intel XDK Cordova Package Build tool. -->
<name>Game</name>
<description>Play game in your mobile phone</description>
<author></author>
<content src="index.html"/>
<preference name="android-build-tool" value="gradle" />
<platform name="android" >
    <access origin="*"/>
</platform>
<preference name="StatusBarBackgroundColor" value="#fa8039" />
<preference name="StatusBarStyle" value="lightcontent" />
<preference name="phonegap-version" value="cli-6.5.0" />
<preference name="xwalkMultipleApk" value="false" />
<plugin name="cordova-plugin-device" spec="1.1.2"/>
<plugin name="es6-promise-plugin" spec="4.2.2"/>
<plugin name="cordova-admob-sdk" spec="0.20.2"/>
<plugin name="cordova-connectivity-monitor" spec="1.2.2"/>
<plugin name="cordova-google-play-services" spec="25.0.0"/>
<plugin name="cordova-libgoogleadmobads" spec="https://github.com/appfeel/google-iosadmobads#master"/> <!-- If available via Cordova registry; consider changing to an NPM reference. -->
<plugin name="phonegap-admob" spec="4.2.1"/>
<plugin name="cordova-plugin-x-socialsharing" spec="5.0.12"/>
<plugin name="cordova-plugin-inappbrowser" spec="1.4.0"/>
<plugin name="cordova-plugin-market" spec="1.2.0"/>
<plugin name="cordova-plugin-whitelist" spec="1.2.2"/>
<preference  name="DisallowOverscroll" value="true"/>
<preference  name="UIwebviewbounce" value="false"/>
<preference  name="webviewbounce" value="false"/>
<platform name="android" >
    <preference name="android-minSdkVersion" value="16"/>
    <preference name="android-targetSdkVersion" value="29"/>
    <preference name="android-installLocation" value="auto"/>
    <preference name="android-signed" value="true"/>
    <preference name="Orientation" value="default"/>
    <preference name="AndroidLaunchMode" value="singleTop"/>
    <preference name="Fullscreen" value="false"/>
</platform>
<preference name="SplashScreenDelay" value="10000" />
<splash platform="android" src="package-assets/3204261.png" density="ldpi" width="320" height="426" orientation="portrait"/>
<splash platform="android" src="package-assets/3204701.png" density="mdpi" width="320" height="470" orientation="portrait"/>
<splash platform="android" src="package-assets/4806401.png" density="hdpi" width="480" height="640" orientation="portrait"/>
<splash platform="android" src="package-assets/7209601.png" density="xhdpi" width="720" height="960" orientation="portrait"/>
<icon platform="android" src="package-assets/36AS.png" density="ldpi" width="36" height="36"/>
<icon platform="android" src="package-assets/48AS.png" density="mdpi" width="48" height="48"/>
<icon platform="android" src="package-assets/72AS.png" density="hdpi" width="72" height="72"/>
<icon platform="android" src="package-assets/96AS.png" density="xhdpi" width="96" height="96"/>
<config-file platform="android" parent="/manifest/application" mode="merge"> 
    <activity android:launchMode="singleTop" />
</config-file>
</widget>
Below is the chrome->console error. I am not able to resolve this warning.
Chrome->Console
Below is the error i am getting now after running command:
ionic cordova platform add browser
ionic cordova run browser
chrome->console

Step 1:In config.xml, verify your existing information and provide the below only:
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreenDuration" value="1000" />
<preference name="SplashScreenDelay" value="30000" />
<preference name="ShowSplashScreenSpinner" value="true" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="ShowSplashScreen" value="true" />
Step 2: In app.component.ts, update the below:
initializeApp() {
this.platform.ready().then(() => {
setTimeout(() => {
this.splashScreen.hide();
}, 1000);
});
}
This should resolve the issue. The Splash will remain active and spinner will also remain active till the homepage is displayed. There won't be any white screen after splash.

You can debug it from android studio bottom bar run, logcat, build etc..
Other hand you can debug it from google chrome just type: chrome://inspect
and you can see the following:
(if your app is running in android studio emulator or connected phone)
You should click on inspect and will see something like this:
Here on console tab you can check what causes the white screen error.

Cordova 3.4 Splashscreen not working

I have an Android Phonegap proyect and I'm trying to use the Splashscreen plugin Cordova provides. I think I have everything correctly set... Here are the pieces of code I think are relevant.
Config.xml
<widget ...>
...
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="15000" />
<plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>
</widget>
Index.html
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
navigator.splashscreen.hide()
}
</script>
I have correctly installed with the CLI the plugin and the splash itself is in the res/drawable* folders in the Android project as I think it should be, but regardless of what I try to do, the splash is not showing. Not even a default one. Not even if I disable the navigator.splashscreen.hide() function (in case it was too fast).
I'm absolutely lost now, have been trying tweaks for a week but I just can't see it.

I'm using cordova v3.6.3 in my android project.
I read a API & Plugin Documentations but, I confused the some options in config.
but, I found a perfect solution.
1. above all, you don't need to use
"navigator.splashscreen.hide()" or ".show()" in Android project.
2. refer my directory structure for understanding clearly.
3. Add following codes into your config.xml file.
※ Do not change the value="screen".
you just change the src and delay value for your splashscreen image.
[Config.xml]
<platform name="android">
<splash src="www/res/screen/android/screen-default.png" />
</platform>
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="4000" />
4. delete a "screen.png" file from drawable directory for understanding clearly.
5. build your project on your command line (cordova build android)
and, look again drawable directory.
I'll promise, you'll success. :-)

I was having the same issue after the 2.5.1 CLI update. If i run the same project in the VisualStudio ionic simulator all works fine. It also works fine when I run the app in the bowser with Telerik Platform. I just need to comment out navigator.splashscreen.hide(); in my project for the latest CLI simulator or I just get a plain white screen.
James

Phonegap: Splashscreen does not work

I am making an Android app using HTML5 on Netbeans IDE. I am using the Cordova framweork to build. Until now, everything is OK except, I cannot make the splashscreen works.
I consulted the Phonegap documentations but in vain. Here what I did below:
The splashscreen plugin is already added in the Cordova plugins
section on Netbeans IDE.
I put the PNG images in the platforms/android/res/drawable/* folders.
I checked the parameters of the splashscreen in the XML Config file
which is located in res/xml/config.xml. It seems the parameters
are OK just like on the documentation.
I included the configurations in the XML Config file which is located in the WWW folder.
And finally, I copied and pasted the JavaScript codes in my
index.html file in the Head section just like on the documentation as
shown below:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.splashscreen.show();
}
Here are the two Phonegap documentations links:
http://docs.phonegap.com/en/3.3.0/cordova_splashscreen_splashscreen.md.html
http://docs.phonegap.com/en/3.3.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens
So, where is the mistake? Thank!

you need to set this -
<preference name="SplashScreen" value="splash" />
<preference name="SplashScreenDelay" value="10000" />
in config.xml

phonegap 3.1 - Unable to hide splash screen on device ready

Using phonegap 3.1 I'm trying to hide the splash screen when device is ready:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.splashscreen.hide();
}
But it returns:
Cannot call method 'hide' of undefined
The navigator object doesn't including the splashscreen attribute.
I've tried it on phonegap 2.9 and it works fine.

After research and experiments this is what we had to do in order to get it work:
cordova plugin add org.apache.cordova.splashscreen
cordova build
Then, cordova build was adding the wrong lines to the config.xml - So we had to change it to the following:
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
</feature>
And in your main activity
super.setIntegerProperty("splashscreen", R.drawable.splash);
super.setIntegerProperty("splashScreenDelay", 10000); //time to display the splash
Finally we have been able to use hide method from javascript.

Are you using the CLI to add the SplashScreen plugin? You have to add the plugin with $ cordova plugin add org.apache.cordova.splashscreen (copy the plugin code from plugins.cordova.io into /yourApp/plugins/org.apache.cordova.splashscreen/ and then later cordova build to copy the plugin code into the appropriate platform location.

If you're using phonegap build, rather than doing
cordova plugin add ...
from the command line, you'll need to add the plugin and feature to the config.xml:
<gap:plugin name="org.apache.cordova.splashscreen" />
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
<param name="ios-package" value="CDVSplashScreen" />
</feature>

Only thing I can guess is to double check that you have <script type="text/javascript" charset="utf-8" src="cordova.js"></script> in the head of your HTML that is calling that JS. Sorry, haven't messed with 3.1 yet.

Add this:
<preference name="SplashScreen" value="splash.png" />
<preference name="SplashScreenDelay" value="3000" />
The navigator.splashscreen.hide() doesn't work for me either.
UPDATE: navigator.splashscreen.hide() only works when building online (phonegap build).

After upgrading to Phonegap Desktop 0.3.6, I had a similar issue and one of my older apps was stuck on the splash screen. In the configuration window, it was showing the correct app name and version and it was updating as soon as I was modifying the config.xml. In the console I had only one error: 500 for http://localhost:3000/cordova_plugins.js
A new app was working fine.
I tried all the above:
splash screen plugin and configuration
adding the cordova.js and cordova_plugins.js to index.html. This is not necessary anymore since many versions ago - the build does it for you.
in the platforms/android/assets/www folder there were cordova.js and cordova_plugins.jsfiles present
in the config.xml there was specified <content src="index.html" />
In the end what solved my problem was to completely delete the platforms folder and run cordova platform add android again. I guess it's safe to do this after each Phonegap upgrade.

Application Error - The connection to the server was unsuccessful. (file:///android_asset/www/index.html)

App Dies On Startup (connection to the server was unsuccessful)
I have an Android application that I'm writing using PhoneGap BUILD. The app was working fine earlier, but now it seems I am getting this error after refining my app (some UI changes only)
1) When I start the app I (usually) get:
Application Error - The connection to the server was unsuccessful.
(file:///android_asset/www/index.html)
Sorry if this is duplication of any question. I have seen some similar questions here, but i couldn't find a perfect answer or solution. As in my case it was working fine until my last changes.

In your config.xml file add this line:
<preference name="loadUrlTimeoutValue" value="700000" />

Here is the working solution
create a new page main.html
example:
<!doctype html>
<html>
<head>
<title>tittle</title>
<script>
window.location='./index.html';
</script>
</head>
<body>
</body>
</html>
change the following in mainactivity.java
super.loadUrl("file:///android_asset/www/index.html");
to
super.loadUrl("file:///android_asset/www/main.html");
Now build your application and it works on any slow connection
refernce.
NOTE: This is a workaround I found in 2013.

Please remove remotely linked jQuery files such as:
https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
Instead, download this file and load it from your local js folder, making the URI:
js/jquery.min.js

Remove the external scripts in your index.html
Change this:
<script src="http://code.highcharts.com/highcharts-more.js"></script>
to
<script src="project_folder/highcharts-more.js"></script>

I had a similar issue and based on above suggestions I first added "super.setIntegerProperty("loadUrlTimeoutValue", 70000);" but that did not help.
So I tried Project -> Clean, that worked and I can launch the app now !
Avinash...

Try this,
1.Rename your index.html to “main.html”
2.Create a new “index.html” and put the following content into it:
<!doctype html>
<html>
<head>
<title>tittle</title>
<script>
window.location='./main.html';
</script>
<body>
</body>
</html>
3.Rebuild your app! No more errors!

fixing this on an ionic app, simply add
<preference name="loadUrlTimeoutValue" value="700000" />
to your config.xml file immediately after this line
<platform name="android">

I had the same on my project.
I tried " super.setIntegerProperty("loadUrlTimeoutValue", 70000); " but to no avail.
I ensured all files were linked properly [ CSS, JS files etc ], validated the HTML using w3c validator [ http://validator.w3.org/#validate_by_upload ] , and cleaned the project [ Project -> Clean ]
It now loads and executes without the same error.
Hope this helps

Extending loading Timeout Limit will not solve the problem which caused the error, it just will avoid the system to show the message but performance will be affected whatsoever.
Actual reason: You may be linking files or images to remote locations, and those resources are taking too long to load. (this is likely the most common error)
Definitive solution: move all the scripts, images and css needed to some local folders and load them locally ...
Performance will be increased and error will be effectively solved.

Check you index.html file. If you use external resources, that not available when you run application then you can get this error.
In my case I forgot to delete link on debugger script (weinre).
<script src="http://192.168.0.102:8080/target/target-script-min.js#anonymous"></script>
So application worked on emulator because http://192.168.0.102:8080/ was on my localhost and available for emulator.
But when I setup application on mobile phone I had same error, because 192.168.0.102 was not available from mobile network.

For my case, the problem was due to losing of the internet connection in my WiFi.

In my case I am using ionic and I simply closed the dialog went to apps in the emulator and ran my app from there instead. This worked. I got the idea of that from here since it was just a time out issue.

If you are using visual studio. After changing config.xml sometimes you need this
clean build solution
rebuild your app
It is working for me.

I was facing the same issue. I noticed that in my index i had both the "on device ready" and the "document.ready" function, so removing one of them fixed my problem :)

It's quite a niche situation but thought I'd post it here in case it saves somebody else the hours I spent going round in circles.
I reverted to cordova-android#9.1 after trying out cordova-android#10.0.1 and started getting this error when trying to run my app in dev mode.
What I had forgotten is that when I upgraded to 10.0.1 I had to remove the whitelist plugin since it's now part of cordova-android.
Reinstating cordova-plugin-whitelist got everything working again for me!

Another reason this error might occur is: there is no index.html in .../YourApp/www/ !
I just followed the ionic guide, and one of the steps is:
$ rm www/index.html
On iOS this is no problem as during the build the compiler takes some default HTML instead. However, when building for android, NO example index.html is used. Took me sometime to find out ("WHY does it work on iOS, but not on android...?)
Easy solution: create a index.html, save it under .../YourApp/www, rebuild ...et voila!