How to show the status bar when reopening an app running in the background?

Ionic Framework ionic-v3
1

Hi everyone ! :slightly_smiling_face:

I have got a little issue here… I don’t know how to show the status bar when reopening my app which I left running in the background to go on another app. :confused:

To understand the problem, here is what I do on my Android phone :

  • I open the app, the status bar shows up as expected and as I ask it to appear
  • I exit the app (I don’t close it, I just exit it, the app is still running in the background)
  • I do something else on my phone (checking Whatsapp for example)
  • Then I come back to my app
  • I reopen it and fuck : the status bar is not there anymore… :confused:

Is there a way to use the function “statusBar.show();” when reopening a running app ?

My app is in fullscreen, and I made some changes that I would like to keep on my status bar, here are the changes that I made :

  • Status bar is hidden on startup (cause it’s quite ugly if not)
  • Status bar is black translucent (on Android)

So that’s why I have to use the function “statusBar.show();” when I start the app…

Thanks to the people who will try to help me.

PS: English is not my mother tongue, so if I didn’t explain something well, do not hesitate to ask me some more information.

2

I found a solution ! :grinning: :wink:

Instead of this :

statusBar.show();

We shall put this :

setInterval(function() {
     statusBar.show();
}, 1000);

It will check every second if the status bar is open, so that way, we have no problem.
If you have a better solution, do not hesitate to post it dear fellas.

3

That’s rather a quite ugly and expensive solution. Wouldn’t it be better to just call statusBar.show() after resuming your app? Then you would only have to listen to the onResume event.

4

Hey Luuk,

That’s exactly what I was looking for actually, an event listener that allows me to relaunch some function when I reopen the app. :sweat_smile:

How should I do on Ionic 2, is there a specific way to write it ?

I tried like this, it seems to be working :

document.addEventListener("pause", function() {
    // do something
  }, true);

  document.addEventListener("resume", function() {
    // do something
  }, true);

Is this how we should do ? I am a newbie on Ionic and Angular.

5

That’s the classic way. It’s cleaner and better if you use the Platform.resume function, which is described in the documentation over here:

Try to prevent oldschool functions in any case, use fat arrow syntax instead: () => { } etc. Else you will eventually run into some scoping issues.

6

Ok thanks mate. :slight_smile:

Here is my code :

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';


@Component({
    templateUrl: 'app.html'
})
export class MyApp {
    rootPage:any = HomePage;


    constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
        platform.ready().then(() => {
            // Splash Screen
                splashScreen.hide();
            // Status Bar
                statusBar.overlaysWebView(true);
                if (platform.is('android')) {
                	statusBar.backgroundColorByHexString("#33000000");
                } else if (platform.is('ios')) {
                    statusBar.styleBlackTranslucent();
                }
                setTimeout(function(){ statusBar.show(); }, 1000);
        });
        platform.pause.subscribe(() => {
            // Do something
        });
        platform.resume.subscribe(() => {
            // Status Bar
            setTimeout(function(){ statusBar.show(); }, 1000);
        });
    }
}

It’s seems to be working… If you see any mistakes, do not hesitate to tell me. I am not quite sure about the position of everything, this way of working makes me confuse sometimes.

7

Means, don’t use function() but fat arrows. Which you didn’t but that’s up to you off course.

example:

setTimeout( () => {
 // do stuff in here
 },500)

even better, don’t use settimeout unless you absolutely need to. Doesn’t it work when you’re calling statusBar.show() directly without wrapping it in a timeout?

8

I made the changes :

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
        platform.ready().then(() => {
            // Splash Screen
                splashScreen.hide();
            // Status Bar
                statusBar.overlaysWebView(true);
                if (platform.is('android')) {
                	statusBar.backgroundColorByHexString("#33000000");
                } else if (platform.is('ios')) {
                    statusBar.styleBlackTranslucent();
                }
                setTimeout(() => { statusBar.show(); }, 1000);
        });
        platform.pause.subscribe(() => {
            // Do something
        });
        platform.resume.subscribe(() => {
            // Status Bar
                setTimeout(() =>{ statusBar.show(); }, 1000);
        });
    }

I am using the setTimeout cause I added those line in the config.xml file :

<preference name="FadeSplashScreen" value="true" />
<preference name="FadeSplashScreenDuration" value="850" />

And it makes the page jump a little when the status bar tries to show up too quickly. I said “tries” cause at the end, it doesn’t even show up, it makes only the page jump. This is the only solution that I found.