Develop Reference

Cordova - white screen after splash, no exceptions in console

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.

how to integrate the crosswalk WebView Annex phoneGap?

I work in windows 8. To compile just create a file and load it into Adobe PhoneGap Build. How to make an application to compile to a plugin Crosswalk?
The link https://build.phonegap.com/plugins/3347
they say that you just need to add a line in the config:
<gap:plugin name="org.crosswalk.engine" version="1.3.0" />
But it does not give any result. The application is compiled as before, without Crosswalk. On the tab, with the list of plug-ins, is still empty enter link view screenshot
I would be very grateful for any help

For Phonegap Build, try these two lines in your config.xml
<preference name='phonegap-version' value='cli-5.1.1' />
<gap:plugin name='org.crosswalk.engine' version='1.3.0' source='pgb' />
Source:
http://phonegap.com/blog/2015/06/16/phonegap-updated-on-build/

You can use this plugin
<gap:plugin name="cordova-plugin-crosswalk-webview-pgb-adapt" source="npm" version="1.4.0-dev-5"/>
instead of
<gap:plugin name="org.crosswalk.engine" version="1.3.0" />

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 3.3.0 inappbrowser' s events are not firing

I use phonegap to develop an app. This app works with some apis so, i have to use inappbrowser plugin. But after phonegap 2.9.x versions, the plugin's events are not firing. You can look at this problem on this forum https://groups.google.com/forum/#!topic/phonegap/e5_5unC2fYs
. Apache has an announcement about it.announcement But it is not a solve. Because, when i try to use phonegap with dreamweaver, i can choose phonegap 2.9 version in Dreamweaver Build service and Inappbrowser events work on Android 4.x devices. So, the problem is not about Android version. The problem is about Phonegap version. For some sdks(admob,...) i have to use eclipse. And i cant create a Phonegap 2.9 version app with command line. Do you have any idea about to choose version when creating app. Or change downgrade phonegap version.
Thanks for you answers.

I haven't tested it myself, but if you're using phonegap build, you can try to include plugins in this format:
<gap:plugin name="org.apache.cordova.inappbrowser" />
, as well as the documented:
<feature name="InAppBrowser">
<param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser" />
</feature>
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
</feature>
see this page for plugin details
I had some trouble upgrading from 2.9.0 to 3.3.0, and it turns out I included my plugins in this format:
<plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser" />
, which for some reason didn't work, when I used the format my plugins started working again.
Hope this helps.

It turns out that my issue was not that the events weren't firing, but that there was a bug in my callback code (a ReferenceError). Since this callback was the first callback to be run when the InAppBrowser received a "loadstart" event, all future callbacks did not run since the first callback raised an exception, making it seem like the InAppBrowser wasn't firing any callbacks at all.
The way I found this was actually by manually evaluating the callback in weinre.
cordova.require('cordova/exec').nativeCallback('InAppBrowser115751764',1,
{
"url" : "http:\/\/example.com\/path",
"type" : "loadstart"
}
,1)
I got the above snippet by reviewing the verbose PhoneGap exec logs. You should also be able to find the callback ID by inspecting the cordova.callbacks object.

Try install cordova:
sudo npm install -g cordova
install plugin inappbrowser:
cordova plugin add org.apache.cordova.inappbrowser
now run:
phonegap run android

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.