Exit App develop using IONIC 3 from a specific page using Hardware Back Button

Question

I try to Exit app from a specific page(HometabsPage) using Hardware Back Button. I use below code:

  var lastTimeBackPress = 0;
  var timePeriodToExit = 2000;

  platform.registerBackButtonAction(() => {
    let view = this.nav.getActive();
    if (view.component.name == 'SignInPage' ) {
      if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
        platform.exitApp(); //Exit from app
      } else {
        this.common.presentToast("Press back again to exit App?", "bottom");
        lastTimeBackPress = new Date().getTime();
      }
    } else {
      this.nav.pop({});
    }
  });

In my application there is two section SignIn and Hometabs. Above code work fine on the SignIn page.

if (view.component.name == 'SignInPage' )

But I try "HometabsPage" instead of "SignInPage" after that in all pages show the toast message.

Please help me.

Its a bit unclear what you are trying to do. Can you add the code that you tried that didn't work instead? Usually, the back button performs "nav.pop()". Which means that you would want to have an empty stack to exit out the app when you press the hardware back button. — user7722867, Oct 24 '17 at 08:52
@user7722867 After login when I click hardware back button form application home(tabs) page it redirects to the login page. But I want after login if user click back button application show "Press back again to exit App?" but it not shown, it shows only in login page because of above code — Neotrixs, Oct 25 '17 at 05:31
@user7722867 please help me how can I set back button priority. — Neotrixs, Oct 25 '17 at 05:41
Follow this guide. https://www.gajotres.net/ionic-framework-handling-android-back-button-like-a-pro/ — user7722867, Oct 25 '17 at 08:26

score 3 · Accepted Answer · answered Jan 03 '18 at 11:37

@Neotrixs After login, set HomeTabsPage as your Root Page. It will prevent your app from going back to LoginPage.
For Hardware Back Button,I did it by Following methods:

/* REGISTERING BACK BUTTON TO HANDLE HARDWARE BUTTON CLICKED */
  registerBackButton(){
    let backButton = this.platform.registerBackButtonAction(() => {
      var stackSize = this.nav.length();
      if(stackSize < 1)
        this.askForPressAgain();
      else
        this.nav.pop();  
    },1);

  }

  /*ASKING FOR PRESS BACK BUTTON AGAIN*/
  askForPressAgain(){
    let view = this.nav.getActive();
    if (view.component.name == 'ProjectsPage' || view.component.name == 'LoginPage') {
      if ((new Date().getTime() - this.lastTimeBackPress) < this.timePeriodToExit) {
        this.platform.exitApp(); //Exit from app
      } else {
        this.toast.showBottomToast(BACK_BTN_MESSAGE);
        this.lastTimeBackPress = new Date().getTime();
      }
    }

}

In the above code, at first I checked the Stack Size, if its less than 1, then showed the Toast for confirmation of leaving the app.
Hope it will help you or someone else.

score -1 · Answer 2 · answered May 26 '18 at 09:43

Ionic latest version 3.xx

app.component.ts file:

import { Platform, Nav, Config, ToastController } from 'ionic-angular';

constructor(public toastCtrl: ToastController, public platform: Platform) {
    platform.ready().then(() => {
        //back button handle
        //Registration of push in Android and Windows Phone
        var lastTimeBackPress = 0;
        var timePeriodToExit  = 2000;

        platform.registerBackButtonAction(() => {
            // get current active page
            let view = this.nav.getActive();
            if (view.component.name == "TabsPage") {
                //Double check to exit app
                if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
                    this.platform.exitApp(); //Exit from app
                } else {
                    let toast = this.toastCtrl.create({
                        message:  'Press back again to exit App?',
                        duration: 3000,
                        position: 'bottom'
                    });
                    toast.present();
                    lastTimeBackPress = new Date().getTime();
                }
            } else {
                // go to previous page
                this.nav.pop({});
            }
        });
    });
}

Exit App develop using IONIC 3 from a specific page using Hardware Back Button

2 Answers2