I have a Cordova app running Cordova CLI 6.4.0. During load, there is a blank white screen for a solid 4-6 seconds on load after the splash screen. This same thing happens during app reload. No events fire from the app, either before or inside platform.ready event. After searching there seems to be some success by people for similar issues, all centered around the splash screen the below config options, none of the suggestions or ideas have worked.
Update
I seem to have made some progress and I think I understand more of what's going on here. Per another post here I added the below lines to my config.xml
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="10000"/>
The behavior now, with those two, is that the Splash Screen is displayed (for a long time, usually around 9 seconds), then the Splash goes away and my app loads. So it's no longer a white screen of evil but just a very slow to load app that is my problem.
/Update
Splash Screen -> 4-6 seconds blank white screen -> Then the app loads and deviceReady fires. This happens with SplashScreenDelay=2000
Or it will not show the splash screen at all and instead have 8-9 seconds of the blank white screen before the app loads. This happens with SplashScreenDelay=0
I have console.logs in my main app's constructor and on platform.ready, neither fire until the white screen of doom is resolved and gone away.
I have tried the below options
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="2000" />
and
<preference name="SplashScreenDelay" value="0" />
It's very confusing because it's not actually my app that's being slow... it's just the loading bits, with a blank white screen between the splash page and app load before anything else happens. I'm open to trying out any ideas as it's basically un-releasable in this state.
This does not happen at all on iOS, with the build and settings all identical, it's an Android specific issue. The device I am running on is a Moto E2.
I am using Ionic and below is a list of included plugins, as it seems that's the most likely culprit at this time. I will have to test everything out without certain plugins to see how it performs.
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-facebook4 1.7.4 "Facebook Connect"
cordova-plugin-splashscreen 4.0.1 "Splashscreen"
cordova-plugin-statusbar 2.2.1 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"
And here's my full icon/splash definitions.
<platform name="android">
<allow-intent href="market:*" />
<icon platform="android" src="resources/icon.png" />
<icon platform="android" qualifier="ldpi" src="resources/icons/android/icon-36-ldpi.png" />
<icon platform="android" qualifier="mdpi" src="resources/icons/android/icon-48-mdpi.png" />
<icon platform="android" qualifier="hdpi" src="resources/icons/android/icon-72-hdpi.png" />
<icon platform="android" qualifier="xhdpi" src="resources/icons/android/icon-96-xhdpi.png" />
<icon platform="android" qualifier="xxhdpi" src="resources/icons/android/icon-144-xxhdpi.png" />
<icon platform="android" qualifier="xxxhdpi" src="resources/icons/android/icon-192-xxxhdpi.png" />
<splash platform="android" src="resources/splash.png" />
<splash platform="android" qualifier="ldpi" src="resources/screens/android/screen-ldpi-portrait.png" />
<splash platform="android" qualifier="mdpi" src="resources/screens/android/screen-mdpi-portrait.png" />
<splash platform="android" qualifier="hdpi" src="resources/screens/android/screen-hdpi-portrait.png" />
<splash platform="android" qualifier="xhdpi" src="resources/screens/android/screen-xhdpi-portrait.png" />
</platform>
When you build the apk-file, be sure to include "--prod" in the command:
ionic cordova build --release --prod android
This optimizes performance and decreases boot-time from 15 seconds (debug build) to 3 seconds (production build) in our app.
Found one some other SO answer, but I have solved with the below
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="10000"/>
The app still takes forever to load (usually around 9 seconds), but I avoid the white screen nonsense at least.
We can fast the loading of application by reducing the assets. But if it is not possible then we can atlease improve User experience(instead of showing blank screen, we can show splashscreen until all assets were loaded).
In config.xml, set auto splashscreen to false.
<preference name="AutoHideSplashScreen" value="false" />.
Create a separate javascript file for App specific events and link this file in index.html
in the javascript file, Catch DeviceReady event. In DeviceReady event handler, hide splash screen. See the code below.
var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
//You can register other plugin specific events here and handle them.
},
onDeviceReady: function() {
navigator.splashscreen.hide();
}
}
};
app.initialize();
I have experienced this with Cordova before. I believe one way I solved it was to initially load an empty page, then redirect to the actual app page. You might give that a try? (It's possible that you will need to wait for the deviceready event before redirecting, not sure)
Related
I am developing (and near to the release) of a Cordova App for iOS and Android.
I am trying to use cordova-plugin-ionic-webview in order to use the latest WebView engines.
I am able to use this plugin on iOS but on Android the App crashes on launch.
MY CONFIG.XML:
<allow-navigation href="cordovaios://*" />
<allow-navigation href="cordovaandroid://*" />
<plugin name="cordova-plugin-ionic-webview" spec="^4.0.0">
<variable name="ANDROID_SUPPORT_ANNOTATIONS_VERSION" value="27.+" />
</plugin>
<preference name="Hostname" value="my-backend-url-to-avoid-CORS.com" />
<preference name="iosScheme" value="cordovaios" />
<preference name="Scheme" value="cordovaandroid" />
<preference name="ScrollEnabled" value="true" />
<preference name="MixedContentMode" value="0" />
<preference name="AllowBackForwardNavigationGestures" value="true" />
<preference name="Allow3DTouchLinkPreview" value="false" />
<preference name="WKSuspendInBackground" value="false" />
<preference name="KeyboardAppearanceDark" value="false" />
LOGS:
5726-5770/mycertificate.enterprise D/SERVER: Handling local request: cordovaandroid://my-backend-url-to-avoid-CORS.com/static/js/10.601e7973.chunk.js
5726-5773/mycertificate.enterprise E/chromium: [ERROR:render_process_host_impl.cc(4070)] Terminating render process for bad Mojo message: Received bad user message: Origin is invalid
5726-5773/mycertificate.enterprise E/chromium: [ERROR:bad_message.cc(23)] Terminating renderer for bad IPC message, reason 123
NOTE:
This config works fine on iOS. On Android I can't use this plugin due to this Hostname/Origin issue.
That custom scheme does not appear to be supported (just try to find something alike that in the source code). It is also beyond my understanding, for what one even would even need to register a custom protocol handler, while never leaving that WebView? The usual purpose is: to open another application.
<preference name="Scheme" value="https" />
<allow-navigation href="https://my-backend-url-to-avoid-CORS.com/*"/>
Unfortunately there is a lot of mismatching between the Cordova Android Platform version and plugins versions, which lead to some waste of time for nothing. Said so, for similar problemas I had like this I simply fixed them downgrading the version of Cordova or Android or the Plugin (or use the same version of android the plugin is using in their code example).
I used to build apps with the basic config.xml file for phonegap for play store until recently when my apps were being rejected because they did not target API level 26. I did some research and and tried a few solutions and did this:
<platform name="android">
<allow-intent href="market:*" />
<preference name="android-minSdkVersion" value="26" />
<preference name="android-targetSdkVersion" value="26" />
</platform>
which went from bad to worse, my apps in debug mode (after xompilation on phonegap build) won't even be parsed on android anymore.
I have equally read a couple of solutions but none seems to walk. I really just want to know what I should be including into the config.xml file so that I can going anew.
My config.xml file has these two lines but they are placed outside of
<platform name="android"></platform>
Here are the values that I use and my app is live on both Apple and Google app store:
<preference name="android-targetSdkVersion" value="26" />
<preference name="android-minSdkVersion" value="14" />
Let me know if you want an example of my full config.xml file! :)
I'm using Cordova to build an app running on both iOS and Android.
Cordova version 7.0.1 - Platform Android version 6.2.3
I have a problem on Android about the splashscreen size. I have 6 different PNG size for each density as you can see in the config.xml below.
<!-- ANDROID SPLASH PREF -->
<preference name="AutoHideSplashScreen" value="true" />
<preference name="FadeSplashScreen" value="true" />
<preference name="SplashScreenDelay" value="4000" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SplashMaintainAspectRatio" value="true" />
<!-- ANDROID SPLASH PNG -->
<splash src="www/splashs/android/splash-land-hdpi.png" density="hdpi" />
<splash src="www/splashs/android/splash-land-ldpi.png" density="ldpi" />
<splash src="www/splashs/android/splash-land-mdpi.png" density="mdpi" />
<splash src="www/splashs/android/splash-land-xhdpi.png" density="xhdpi" />
<splash src="www/splashs/android/splash-land-xxhdpi.png" density="xxhdpi" />
<splash src="www/splashs/android/splash-land-xxxhdpi.png" density="xxxhdpi" />
Well, when I launch the app on my Lenovo tablet, which has a 800x1280 resolution, it display the wrong PNG file. The app decide to show the LDPI one, with a resolution of 400x240.
The result is of course really bad and very pixelated, I can't release my app like that.
I tried on a smartphone Galaxy J, everything works fine, the good PNG size is selected during the splashscreen.
I tried to remove all PNG file except the higher one (1920x1280 xxxhdpi). The app display it but the result is even worst. The image is really even more pixelated... really weird problem.
I didn't find any solution yet on the web. Any ideas?
My app keeps using the default cordova icon and splash screen. Upon digging, what should happen is all of my icon/splash get copies to platforms/android/res/. When I look in there, it's just the default cordova ones. However, in my resources/android/ all of my custom ones are there.
Working fine for iOS, not fine for Android at. I am running Cordova CLI 6.4.0.
I have all the custom icons and splash images setup in correct directory structure, and receive no errors during platform add or build android
Below is my config.xml
<platform name="android">
<allow-intent href="market:*" />
<icon platform="android" src="resources/icon.png" />
<icon platform="android" qualifier="ldpi" src="resources/icons/android/icon-36-ldpi.png" />
<icon platform="android" qualifier="mdpi" src="resources/icons/android/icon-48-mdpi.png" />
<icon platform="android" qualifier="hdpi" src="resources/icons/android/icon-72-hdpi.png" />
<icon platform="android" qualifier="xhdpi" src="resources/icons/android/icon-96-xhdpi.png" />
<icon platform="android" qualifier="xxhdpi" src="resources/icons/android/icon-144-xxhdpi.png" />
<icon platform="android" qualifier="xxxhdpi" src="resources/icons/android/icon-192-xxxhdpi.png" />
<splash platform="android" src="resources/splash.png" />
<splash platform="android" qualifier="ldpi" src="resources/screens/android/screen-ldpi-portrait.png" />
<splash platform="android" qualifier="mdpi" src="resources/screens/android/screen-mdpi-portrait.png" />
<splash platform="android" qualifier="hdpi" src="resources/screens/android/screen-hdpi-portrait.png" />
<splash platform="android" qualifier="xhdpi" src="resources/screens/android/screen-xhdpi-portrait.png" />
</platform>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="2000" />
<preference name="FadeSplashScreen" value="false" />
<preference name="FadeSplashScreenDuration" value="0" />
<preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF" />
Same exact exact setup for iOS, and works perfectly there
I've triple checked the paths and everything is correct, and my custom icons are indeed in the indicated locations, but simply not copied over during build
I've tried several times to remove and add android platform, then build, same with cordova-plugin-splashscreen
Both the icon and the splash screen are not working on Android
And here's a screencap showing the folder layout, and the unfortunately incorrect images.
Update made some progress but not quite there. I replaced "qualifier" with "density" in my config.xml. Now what it does it create a correct looking "res" folder, but it puts it in the root of my project instead of platforms/android. It also creates platforms/android/res but all of the images in there are the default Cordova ones. If I move the new folder /res (my custom icons) into /platforms/android (default cordova icons) before build then the app shows my correct stuff. I guess it's a working workaround but an annoying one... and to note; I delete the /res folder but cordova platform add android builds it, just seems to create it in the wrong directory.
This is an issue in cordova-android solved in the version 6.1.0.
The recommended steps are:
cordova platform update android#6.1.0 --save
cordova platform rm android
cordova platform add android
Source: https://github.com/apache/cordova-android/pull/343
I have the same problem, If you find a solution tell me please :)
EDIT
I Solved updgrading my version of android
cordova platform update android#6.1.0
I had this problem some time before and I, and found two ways to pass over.
Upgrade Cordova Platform: This is the recomended, I believe that you upgrade to Cordova 6.4.x but not your Platform, please try: cordova platform update android#latest
OR
Downgrade Cordova CLI: Sometimes, the prev step does not work, so you have to do something that is disrecomended, downgrade cordova to work npm install -g cordova#6.3.1 (Note => CLI 6.3.1 is just the version I believe could work)
I am building an android webapp using cordova and framework7 for an existing drupal site. I'm currently using cordova-plugin-splashscreen for the app's spashscreen. I am able to enable or disable the spinner but not change the color of it.
I want to change the color of the spinner and also change the position to bottom of the screen.
I have tried the solution in this
link, but its not working. please don't mark this as duplicate and give a solution.
This is the part where i include the spinner in config.xml
<preference name="loadUrlTimeoutValue" value="700000" />
<preference name="ShowSplashScreenSpinner" value="true"/>
<preference name="SplashScreenSpinnerColor" value="#242424"/>
<plugin name="cordova-plugin-splashscreen" spec="~3.2.2" />
<engine name="android" spec="~6.0.0" />
Note: In the cordova site, the SplashScreenSpinnerColor preference is given as a quirk for windows.