Long whitescreen at app launch


#1

Hello.

I’ve been searching a solution for my issue, and I found several topics talking about it, but I haven’t found a solution that is working for me.

I have a simple Ionic project that I started with the tabs template. I’m a beginner with Ionic so I just edited those pages, did not add any. I use several plugins for fingerprint authentication, info storage(with ionic-native storage) and also FCM plugin for notifications.

The thing is, I have the same problem as a lot of people, which is a white screen lasting ~10 seconds.
By using the --prod flag, which should optimize the whitescreen time as said in other topics, I get a build without error, but when I put the apk on the phone, it stays on whitescreen forever.

Any idea about why this happens and how to fix it?


#2

Hi Yozamu,

just try to control the splash by your self:

in your config.xml, set this option to a high value (is set it to 30 seconds):

<preference name="SplashScreenDelay" value="30000" />

This keeps the splash shown for 30 second on bootup, but in the app.component.ts, put this

public initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}

The interesting portion is the splashScreen.hide();

nb: you have to import
import { SplashScreen } from “@ionic-native/splash-screen”;
both in app.component.ts and app.module.ts and the splashScreen in your app.module.ts @NGModule providers

hope this helps…


#3

Thanks for the reply.

Unfortunately, the template I used already included the splashScreen.hide() in app.component.ts.
Also, I’ve already tryied to edit the SplashScreenDelay value.

So I’m afraid that this is a solution I’ve already explored, and which led me nowhere!


#4

OK, does the screen remain blank even after timeout?
Then it might be an exception. Have you tried to debug with chrome dev tools?


#5

Screen remains white only when I build with the --prod flag. If I don’t, everything works as expected, except the startup time is long.

Since I’m really new to ionic and cross platform dev globally, I’ve never used chrome dev tools. I’m only building on android directly since I use plugins requiring this platform, like notifications and fingerprint authentication


#6

You could also debug your android device with chrome dev tools. If you enable usb debugging on your device, you’ll be able to inspect the app at runtime on your device. You have to find out what’s actually going on on the device itself when running with prod.


#7

Thanks for the tip.
Here is the result I get:


main.js:16 Install the Firebase plugin: 'ionic plugin add cordova-plugin-firebase'
s @ main.js:16
main.js:1 ERROR Error: Uncaught (in promise): plugin_not_installed
    at c (polyfills.js:3)
    at Object.reject (polyfills.js:3)
    at e._fireError (main.js:14)
    at e._failed (main.js:14)
    at main.js:14
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (main.js:3)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3
b @ main.js:1
main.js:32 Ionic Native: deviceready event fired after 2427 ms
main.js:20 DEVICE READY FIRED AFTER 1553 ms
plugins/cordova-sqlite-storage/www/SQLitePlugin.js:175 OPEN database: _ionicstorage
2plugins/cordova-sqlite-storage/www/SQLitePlugin.js:106 new transaction is waiting for open operation
plugins/cordova-sqlite-storage/www/SQLitePlugin.js:179 OPEN database: _ionicstorage - OK
plugins/cordova-sqlite-storage/www/SQLitePlugin.js:80 DB opened: _ionicstorage

This is already weird that I’ve got warnings about Firebase plugin that appears as not installed since it is working fine in debug mode.
After that, I really don’t undertand the error mentioned, and also don’t know why there are more notifications after that if the error is why the app is crashing ?


#8

There is an issue with the recent release of Firebase. It seems the promise-polyfill dependency was not included. Until you run on-device or emulator, the issue does not appear. Run $ npm i promise-polyfilll and then rebuild your app.


#9

Unfortunately, I ran the command and rebuilt the app (with --prod flag) and I still have the same issue, with the same error message