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.
I have an error when I run my app on ionic cordova run android.
My error is : Connection to the server was unsuccessful. (file ///android_asset/www/index.html)
I try to resolve it with forums that exists with this solution :
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>title</title>
<script>
window.location='./main.html';
</script>
<body>
</body>
</html>
Or modify in the config.xml this line :
<preference name="SplashScreenDelay" value="3000" />
to this line :
<preference name="SplashScreenDelay" value="70000" />
But when I run my app after saving my new code, the error still appear and when I return into my code, I see that the code is still the same and not has been modified (even if I modified it like I sayed previously !)
Someone know how to resolve my problem ?
Thanks in advance,
Caroline
I had that error with one application and I solved it with Crosswalk.
ionic plugin add cordova-plugin-crosswalk-webview
After installation you may have to adjust the design but the error will no longer appear.
More about Crosswalk.
Optional config.xml settings:
<preference name="loadUrlTimeoutValue" value="60000" />
<preference name="AutoHideSplashScreen" value="false" />
Try updating your Cordova android platform:
ionic platform remove android
ionic platform add android
Add and Remove android platform
ionic platform rm android
ionic platform add android
It's not really an answer but it allowed me to see my app without the error message.
When I run my app with the terminal ionic cordova run android the error still persist.
But if I run my app with Android Studio it's works !
I've been away from my Cordova app for a bit, but just did a fresh clone yesterday and noticed that it's got the "white screen of death" symptoms -- the splash screen displays, the program loads... and then I just get a blank screen. Some more details:
CLI: Cordova 6.1.1, android 5.1.1, ios 4.1.1
I'm not using any special plugins to display a splash screen -- just <splash> elements in my config.xml file.
This is happening in both iOS and Android, both on local builds and using PhoneGap Build (i.e., debug and release).
There are no exceptions of missing resources in the console, either in iOS (using Safari's dev tools) or Android (using Chrome's dev tools).
I've done a diff with my last known working build, and there's really nothing that pops out. I saw an undefined Underscore reference, but I backed that change out and it didn't resolve anything -- I think I'd see the exception in the console, anyway.
Has Cordova / PhoneGap done something recently that might be causing this? Any ideas on how to isolate this one? I'm really stumped.
Well that was ugly. It turned out that there was an exception being thrown, it was just being thrown too early for the browser dev tools to pick it up (Safari, Chrome for iOS and Android, respectively). The exception did show up when I ran things through the browser target (cordova platform add browser, etc.) So that browser platform is useful for something I guess. :-)
In my case, the cordova-sqlite-storage plugin had made a breaking API change that broke the code when I updated everything. The solution was to pin the plugin to an earlier version in the config.xml file.
So, lessons learned:
If you suspect there's an exception being thrown during startup, you can use the browser platform to track it down.
Pin your plugins to a specific version using the spec parameter in the config.xml. This will save you some heartache in the future.
[another option from #jcesarmobile, below] hitting refresh in the browser dev tools will also kick out the exception. Nice!
I'll be going back in to the config.xml and pinning the other items -- and doing some cleanup as suggested above. Thanks again, everyone.
I manged to run your app this are the steps I followed.
1) First you need to declare Splash screen preference along with splash screen plugin location in your config.xml. This is what I think you are missing
<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 images in config.xml ,which you have already done.
I suggest you to keep images in default density folders of android project (ldpi,mdpi,hdpi,xhdpi etc) instead of screen/android folder as it will simplifiy your project structure.
<!-- 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) Add Splash screen plugin class into your android project structure under org.apache.cordova.splashscreen package or install splash screen Cordova plugin
https://cordova.apache.org/docs/en/3.1.0/cordova/splashscreen/splashscreen.html
4) Final and most important step you must have cordova.js in your www folder
And after that I was able to run your web app
I am android developer I guess something similar you might need to do for iOS
The only fix that worked for me was found here:
http://www.codingandclimbing.co.uk/blog/ionic-2-fix-splash-screen-white-screen-issue-14
basically edit your config.xml file. The splashscreen setup should look like this:
<preference name="ShowSplashScreen" value="true"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="30000"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="FadeSplashScreen" value="false"/>
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen"/>
</feature>
In my case, i put an ALERT before first screen still mounted.
I had a similar problem while using cordova with ember.js. It was about the url change strategy of my application.
Have a look on this answer, it maybe related with your problem.
Try adding this preference to your config.xml, maybe this is the problem
<preference name="AutoHideSplashScreen" value="true"/>
You should install the splash-screen plugin for both iOS and Android to work properly if you are adding splash in config.xml. or else without splash-screen plugin what you could try to do is making an splash screen with HTML, divide your body in 2 parts: content and login. Then you set the content style display: none. When the app is done loading you just set loading screen display: none and content screen display: block or whatever you want
And you missing below preferences in your config.xml
<preference name="SplashScreenDelay" value="3000" />
<preference name="SplashMaintainAspectRatio" value="true|false" />
<preference name="SplashShowOnlyFirstTime" value="true|false" />
A missing <meta http-equiv="Content-Security-Policy"> tag on the head caused a white-screen in my case.
I added these lines in config.xml
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="6000" />
I also have a black screen when I give screendelay as 3000.so I changed to 6000.I think cordova take some time to load your js,css and image files.
In my case, I accidentally commented the state definition in app.js.
My problem was with ES6, it runs perfectly on iPhone and Android 6, but it doesn't work with Android 4 and 5.
I have this situation and solved it.
In my case it was something similar to this code:
$scope.images.push({ id: i, src: "http://placehold.it/50x50" , pstb, trno});
The above code run well on android 7.0 but only white screen after splash on android 4.4.4
Changed to this:
$scope.images.push({ id: i, src: "http://placehold.it/50x50", pstb: pstb, trno: trno});
Run on all devices (at least all my devices)
Not really an answer, but I'll add it to the list of potential experiments here - I never worked out how this was happening, but it was resolved by deleting the entire platforms folder and node_modules, then re-adding the platform.
1>> If you suspect there's an exception being thrown during startup, you can use the browser platform to track it down.
2>>Pin your plugins to a specific version using the spec parameter in the config.xml. This will save you some heartache in the future.
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
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.