SplashScreen is showing twice


#1

Hi everyone!

In my ionic app splash screen is showing twice on first launch.
And when it shows in second time it is take a lot of time.

I put the alert dialog in app.component.ts

platform.ready().then(() => {
  statusBar.overlaysWebView(true);
  statusBar.backgroundColorByHexString('#0a7384');
  splashScreen.hide();
  let alert = this.alertCtrl.create({
      title: 'splashScreen hide',
      subTitle: 'WTF',
      buttons: ['ХЗ']
  });
  alert.present();
});

Could you help me, please.

https://youtu.be/15qw3Z9pT4I


#2

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android Look at the console and network tabs for errors.


#3

When i run app in browser, i don’t see SplashScreen. Only on device (Also don’t see it in Ionic View) with apk.
I also used enableProdMode() in main.ts.

AppRate plugin i included in project today.

I’m also remarked, that when i build with command
npm run build [--prod]
it’s okay, but when i used
- ionic cordova build android --prod --release -- -- --keystore=C:\keys\mykeys.keystore --alias=mykey3
i have error with fonts.

Some screens




#4

I don’t really know what you mean by

Remote debugging is connecting a local browser to a remote app running on a device - see the link I posted.


#5

Sorry for my bad english.)

I do all by instruction, in result i have connect a local browser to a remote app, but i don’t see the SplashScreen. SplashScreen only showing on app with installed apk.

This two first screens from my previous post - there is browser with connected remote app.


#6

Does the problem also appear if you do not have an additional alert after hiding the splash screen?


#7

First, you need to post anything in your config.xml file related to splash screen. Are you telling it to auto-hide? Are you telling it to stay open for x number of ms? There’s a large chance that is related to your problem, but you haven’t posted any code from config.xml. If you want to explicitly hide the status bar in your code you should set AutoHideSplashScreen in your config.xml to false.

Secondly, add a debugger call into your platform.ready block so that if you have dev tools open the debugger will hit the breakpoint and wont’ call splashScreen.hide() until you play past it like so:

platform.ready().then(() => {
  statusBar.overlaysWebView(true);
  statusBar.backgroundColorByHexString('#0a7384');
  debugger;
  splashScreen.hide();
  let alert = this.alertCtrl.create({
      title: 'splashScreen hide',
      subTitle: 'WTF',
      buttons: ['ХЗ']
  });
  alert.present();
});

Make sure you open your dev tools right away and that should cause the app to stop there for you. Then you can see if your splash screen hides automatically or not. Hopefully though, that won’t even matter because the issue is probably in config.xml.


#8

app.component.ts


constructor(public platform: Platform, statusBar: StatusBar, public splashScreen: SplashScreen, app: App, public appRate: AppRate, private alertCtrl: AlertController) {

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need
      statusBar.overlaysWebView(true);
      statusBar.backgroundColorByHexString('#0a7384');
      splashScreen.hide();
      //app.setScrolling();
      //app._setDisableScroll(false);
      let alert = this.alertCtrl.create({
          title: 'splashScreen hide',
          subTitle: 'WTF',
          buttons: ['ХЗ']
      });
      alert.present();
    });

    platform.registerBackButtonAction(() => {
        let nav = app.getActiveNav();
        let activeView: ViewController = nav.getActive();

        if (activeView != null) {
            if (typeof activeView.instance.backHome === 'function') {
                activeView.instance.backHome();
            }
            else if (nav.canGoBack()) {
                nav.pop();
            } 
            else nav.parent.select(0); // goes to the first tab
        }
    });

    this.appRate.preferences = {
        ....
    };

    this.appRate.promptForRating(false);
    }
`

#9

config.xml

<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />

Yes, as i said the splashscreen may stay to open more then 20-30 seceonds (it depend of device, i think)

i will check all yours recommendations tomorrow, and will answer to you. Thank you.


#10

Thanks all, finally i figured out how to debug on mobile device with chrome.

There are the same console messages in browser and cmd - is that mean that debugging on device is work?

When debugging splash screen on device is freezes, but in browser i can work with my app.



#11

ionic cordova run android

In browser i don’t see SplashScreen, but on device i see it, and on the first launch splashscreen shows more then 10 seconds.



#12

@DmitriyLer You are confusing. What does “in browser” mean? ionic serve? Remote debugging the device? What does “is freezes” mean in the message before that?


#13

Sorry for my bad english.)

Forget all. After previous posts i have a little progress in debugging.

I use these commands:

ionic cordova build android
ionic cordova run android

1

My app installed and sucessfully launched.

I’m opening chrome
chrome://inspect/#devices

I’m clicking on Inspect.

And this what i see.

SplashScreen only showing on device.



#14

I changed one setting in config.xml, and checked on a few devices

<preference name="SplashScreen" value="none" />

No SplashScreen - no problem.

In first i thought, that problem in code.
I thought, that some resources not installed, and when app is launched in first time, there are loaded from internet.

But now i think that problem in configuration of SplashScreen, as it was said above.

I’m tried to installed and deleted application a few times, and there was no problems with first launch


#15

That is normal, as the dev tools only show the webview - the splash screen is a native overlay over your app until the app is fully loaded.

What is strange is that it shows the splash screen again after it first hid it - that doesn’T really make sense to me.


#16

Yes, it is really strange.
I think, that some time my app will working without splash screen.
But if you have some thoughts - i will be grateful to you.

Thank you all.


#17

Yes, it is really strange.
I think, that some time my app will working without splash screen.
But if you have some thoughts - i will be grateful to you.

Thank you all for your help.