Android: Splashcreen shows much longer then device.ready() takes to fire

Ionic Framework ionic-v3
1

I have multiple plugins installed on my Ionic 3 app (see plugin list below for details). When I do a production build on android (ionic cordova run android --prod) and start my app, the splashcreen shows for about 5-6 seconds, depending on the device. If I reduce the Splascreen delay in my config.xml the splashscreen hides after this time and leaves a white screen.

Since the splashScreen.hide(); is called as soon as the platform.ready()-event is triggered, my first thought was that the app needs this time to be loaded. However, 6-9 seconds is a veeeery long time for an app to load on a current smartphone. Compared to native apps which load in less than a second, this leads to a very bad UX.

Question 1: Is this a thing of Ionic in combination with the plugins? Or am I doing something wrong here?

Looking at the logs of my app, it says “Ionic Native: deviceready event fired after 2364 ms”.
Question 2: How comes, that the deviceready event is fired after 2.3 seconds and the splascreen shows for 6-9 seconds? That doesn’t make any sense to me.

Note: On iOS the splashscreen shows barely 1 second on current devices.

Ionic info:

cli packages:
    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:
    cordova (Cordova CLI) : 7.1.0

local packages:
    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.8.0

System:
    Android SDK Tools : 25.2.5
    Node              : v8.2.1
    npm               : 5.5.1
    OS                : Windows 10

plugin list:

com.googlemaps.ios 2.5.0 "Google Maps SDK for iOS"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-appminimize 1.0 "AppMinimize"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-console 1.0.7 "Console"
cordova-plugin-crosswalk-webview 2.3.0 "Crosswalk WebView Engine"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-facebook4 1.9.1 "Facebook Connect"
cordova-plugin-firebase-analytics 0.12.1 "FirebaseAnalyticsPlugin"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-googlemaps 2.1.1 "cordova-plugin-googlemaps"
cordova-plugin-googleplus 5.1.1 "Google SignIn"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-native-spinner 1.1.3 "Native Spinner"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-vibration 2.1.5 "Vibration"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-support-google-services 1.0.0 "cordova-support-google-services"
ionic-plugin-keyboard 2.2.1 "Keyboard"
phonegap-plugin-push 2.0.0 "PushPlugin"
2

Try to set splashscreen delay time on config.xml.
I usually set it to 0 and use animated HTML splash screen:

3

Hi @jamesharvey. Thanks for your response. As I said:

This white screen is shown as long as otherwise the splascreen image would be shown. So if I reduce the splashscreen delay to 2 seconds, the other 4-7 seconds a white screen is shown - this is even worse.

Thanks for the link. However, I don’t really see what would change if I use an animated HTML splashscreen. I would still need to hide the splash screen at some point of time. And I’m currently wondering, why it’s taking so long after the device.ready()-call to call the platform.ready() event and hide the splashscreen (no matter if animated or not).

4

@JayKay Hey! Were you able to solve the issue? I am having the same issue and struggling… Thank you!

1 Like
5

The best solution is waiting until release of Capacitor.
Capacitor will replace cordova… and it will come with an enhanced brand new splash screen plugin.
https://ionic-team.github.io/capacitor/

I found cordova’s splash screen is not really professional at all. It causes all kinds of problems on many different devices.

6

unfortunately that is not an option.
So would be great to here from @JayKay

7

I heard it’s coming in February so a few weeks left until its release…
To be honest, the white blank screen happens on a quite random basis.

8

Make sure the size of splash.png should be 2732 x 2732 pixels. Here check the Easy way to set splash screen

9

Hi! Unfortunately, I wasn’t able to solve the issue so far… Still interested in a solution if you’ll find any…

10

Two main sources of trouble: 1) your code, or 2) plugin code

Re 1): Import as little as possible into app.module.ts. Lazy load all your pages, and make sure the modules you import are not asking for much at startup. Registering providers is fine. But building pages or doing array initialization is not. Also, put nothing in the constructor of app.component.ts. Stick all the hard work in ionViewWillEnter or ngAfterViewInit or a similar life cycle hook.

Re 2) Much harder to diagnose by forum. I’d suggest you mock out all your plugins (for example by using the Ionic Native Mocks package), and then add them in again one by one, and see if that affects your startup time.

3 Likes