Making ionic app exit on double tap of hardware back button

Perhaps you have faced with this issue : users want to be able to exit the app on double tap of hardware back button similar to most of other android apps which ionic by default doesn't let you to do so.. but here is the solution.

the fact is, by default, hardware back button works only when user wants to get back to other pages only and only if you use push method of nav controller instead of setRoot of it ,besides, another task of hard ware back button is to close side menu - drawer menu- when it's open, so in order to make user able to exit app on double tap of hardware back button without messing with default tasks of it, we need to control all of these tasks, meaning somehow we need to overwrite some tasks of ionic which may sound difficult, but not only is not hard in action but also is bunch of fun, at least for me as a code addict :) Again, it's a ionic 3 stuff, there are certainly much better solutions for ionic 4 :)

to begin, we need to work with registerBackButtonAction of Platform which is already included in your app.component.ts of your app.

What we're going to do is add some triggers when platform is ready just like below :

this.platform.ready().then(
  () => {
     this.platform.registerBackButtonAction(
       () => {
          /*
          * Our codes go here
         */
       } 
    );
  }
);

Okay, now it's time to play with nav which should defined before of constructor of your MyApp class of app.components.ts like this :

export class MyApp {
    @ViewChild(Nav) nav: Nav; 
    // rest of code...

and, also we need to import MenuController from ionic-angular for controlling menu :

import { MenuController } from 'ionic-angular'; // don't forget to add it to your constructor ;)

so, now we can go back to our code.. first let's check if menu is open or not. let's say we got MenuController defined as menuCtrl in our constructor, so we'll have :

this.platform.ready().then(
  () => {
     this.platform.registerBackButtonAction(
       () => {
          if(this.menuCtrl.isOpen('mymenu')){
            this.menuCtrl.toggle();
          }else{
            /*
            * we'll get back here in next step
           */
         }
       } 
    );
  }
);

what happens above is, we check if menu is open via isOpen method which takes id of menu as input and returns true if menu is open and false if not. then if menu is open we will toggle it using toggle method. you also could use Close method as well, but i just like the world "toggle" :) .

Okay, now it's time to handle rest of the story. since if menu is not open we can check whether there's any page user can get back to or if not, show him a confirmation message and close the app if user approves the confirmation message. Also, in my opinion, you'd better to turn user back to home page if is already in a root page and then show confirmation message for closing app which is what happens below :

this.platform.ready().then(
  () => {
     this.platform.registerBackButtonAction(
       () => {
          if(this.menuCtrl.isOpen('mymenu')){
            this.menuCtrl.toggle();
          }else{
            if(this.nav.canGoBack()){
               this.nav.pop(); //which navigates user to back page :)
            }else{
               let currentPage = this.nav.getActive();
              if(currentPage.component.name === "Home"){
                 const alert = this.alertCtrl.create({
                      title: 'Exit the app',
                      message: 'Do you want to exit the app?',
                     buttons: [{
                          text: 'No!',
                          role: 'cancel',
                          handler: () => {
                            console.log('canceled :)');
                          }
                      },{
                              text: 'Yes',
                              handler: () => {
                                this.platform.exitApp();
                              }
                          }]
                      });
                     alert.present();
             }else{
               this.nav.setRoot(Home);
             }
            }
         }
       } 
    );
  }
);

In above code, we first checked in which page user is via let currentPage = this.nav.getActive(); and then if it was home page, code will show a confirmation message which let's user decide whether to exit app or stay inside and if it was not the homepage, then user definitely wants to navigate to home page :)

yup! as easy as that :)

Thanks for reading.

~ yours..

@thel0ner