ionic 2 double press back button to exit app

back-button-event-handler.ts

// Note:  I ended up using a service to quickly regiser and unregister the event when users navigate through pages.
// Please read before using.

import { Injectable } from '@angular/core';
import { Events, Platform } from "ionic-angular";
import { ToastControllerProvider } from "../toast-controller/toast-controller";


@Injectable()
export class BackButtonEventHandlerProvider {

  public backButtonPressedTimer: any;
  public backButtonPressed = false;

  // Unregister when entering other pages. I register another one later somewhere else for different callback.
  public unregisterBackButtonAction: any = null;

  constructor(public platform: Platform,
              public events: Events,
              public toastCtrl: ToastControllerProvider) {
  }

  // call this method when you want to register the event
  // pick another name
  registerPressToFlipCard(cb) {

    if (!cb) {
      return;
    }

    // the 101 priority number does not seem to work at all, ignore it
    this.unregisterBackButtonAction = this.platform.registerBackButtonAction(cb, 101);
  }

  // register double press event
  registerDoublePressToExitApp(page) {

    if (this.unregisterBackButtonAction) {
      return;
    }

    console.log('register double press to exit app');

    let cb = (page) => {
      return () => {

      	// when users press back button on the root page of a `stacked`(tabbar root page) pages, show exit app
        if (['NotificationListPage', 'TargetPage', 'ProfilePage'].indexOf(page) !== -1) {
          this.events.publish('tabbar.tabs.select', 0);
          return;
        } else {
          this.showExit();
        }
      }
    };

    this.unregisterBackButtonAction = this.platform.registerBackButtonAction(cb(page), 101);
  }

  // show the message toast
  showExit() {
    if (this.backButtonPressed) {
      this.platform.exitApp();
    } else {
      this.toastCtrl.present('Press again to exit App');
      this.backButtonPressed = true;
      if (this.backButtonPressedTimer) {
        clearTimeout(this.backButtonPressedTimer);
      }
      this.backButtonPressedTimer = setTimeout(() => {
        this.backButtonPressed = false
      }, 2000);
    }
  }

  // unregister the double press to exit app event 
  unregister() {

    if (typeof this.unregisterBackButtonAction == 'function') {

      this.unregisterBackButtonAction();

      this.unregisterBackButtonAction = null;

      console.log('unregister double press to exit app');
    }
  }
}

Hi shrekuu

Thanks for the source code here.
I used the same code in my app, when i deploy in android device for test its working as expected but when i build my app with release mode and doing sing APK file. The alerts message not prompting. I am not able to find the issue, can put light on it.

Thanks in advance.

@mansur1020 Same problem

Hi @mansur1020 and @liyou44 , I updated the code. Please try again. :)

Hi, thanks for sharing, do i have import this provider on every single page or just on the app page?

How can use someone help ? i import providers.

@lAndresul Hi, we used tab layout, so we imported this provider in the root tab components. When users enter the root tab pages, I call registerDoublePressToExitApp('a-page-name') method, when users leave these pages, I call unregister() to disable this functionality and give the back button back to ionic. Basically you need to import this provider on pages where you want to do this double press back button to exit app thing. The registerPressToFlipCard() method was part of our project, you can omit that.