How to Exit Ionic 4 app using device back button?

5
votes

I'm want to close the application when I press the back button on the android device, but nothing was happening and I found a solution by writing the following code to the home page. And home page is loaded in my tabs, and it does work as it closes the app. but it is closing the app from all the other pages also. Please help!

ionViewDidEnter() {
    this.subscription = this.platform.backButton.subscribe(() => {
      navigator["app"].exitApp();
    });
  }
  ionViewDidLeave() {
    this.subscription.unsubscribe();
  }
4
angularionic4

4 Answers

6
votes

Exit Ionic4 Application Using Device Back Button

I tried this method and it is working fine for me.

When the view is entering I am subscribing it into variable and when it leaves then unsubscribe. So that the exiting app on the back button will execute for that particular page only.

constructor(private platform: Platform){}
backButtonSubscription;
ionViewWillEnter() {
  this.backButtonSubscription = this.platform.backButton.subscribe(async () => {
  navigator['app'].exitApp();
  });
 }
}
ionViewDidLeave() {
 this.backButtonSubscription.unsubscribe();
}
3
votes

Updated Answer

It seems things are a bit different with Ionic4. They have added the subscribeWithPriority() feature.

You can use this snippet to which you can set on the homepage so that the back button exits:

 this.platform.backButton.subscribeWithPriority(1, () => {
        navigator['app'].exitApp();
 });

You could easily put a toast onto this either as a timeout that exits if you press it twice in a short period of time, or have a confirm button to exit.

Original Answer

This is a long shot, but I was looking for something similar to this recently.

The feature I wanted to implement was the "press back again to exit" that I had seen in a few apps.

This is normally triggered by the user pressing back all the back to the start of the app. Then pressing it again shows a toast warning them one more back and you will exit the app. This stops the user accidentally exiting the app.

I know you are looking for Ionic 4 and that's what I code in as well but what I found is tagged as Ionic 3. It doesn't make any mention of Ionic 4 even though it has been updated as recently as 2 months ago, so I guess you should try it out if you're still trying to solve this problem:

FYI I found this at the end of a lengthy discussion on the Ionic Framework forum.

1
votes

If your intention was to exit the app only on the home page and after a double tap of the back button, here is the solution that worked for me, was part of the code taken from https://www.youtube.com/watch?v=Ntql-JPIQW8.

Code

import { Component, ViewChild } from "@angular/core";
import { IonRouterOutlet, Platform, ToastController } from "@ionic/angular";
import { Location } from "@angular/common";

export class AppComponent {
  private lastBackTime: number = 0;
  private intervalExitApp: number = 2000;
  @ViewChild(IonRouterOutlet, { static: true }) routerOutlet: IonRouterOutlet;

  constructor(
    private platform: Platform,
    private toastController: ToastController,
    private location: Location
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.backButtonEvent();
    });
  }

  private backButtonEvent() {
    this.platform.backButton.subscribeWithPriority(10, () => {
      let currentTime = new Date().getTime();
      console.log("currentTime", currentTime);
      console.log("lastBackTime -> ", this.lastBackTime);
      console.log("Subtraction -> ", currentTime - this.lastBackTime);
      if (
        !this.routerOutlet.canGoBack() &&
        this.lastBackTime &&
        this.lastBackTime > 0 &&
        currentTime - this.lastBackTime < this.intervalExitApp
      ) {
        navigator["app"].exitApp();
        return;
      }
      if (!this.routerOutlet.canGoBack()) {
        this.createToastExitApp();
      } else {
        this.location.back();
      }
      console.log("backButton.subscribeWithPriority");
    });
  }

  private createToastExitApp() {
    this.toastController
      .create({
        message: this.getStringFromTranslateService(
          "toastMessage.message.exitApp"
        ),
        duration: 2000,
        color: "primary",
      })
      .then((toastEl) => {
        toastEl.present();
        this.lastBackTime = new Date().getTime();
      });
  }
}
0
votes

try this. in AppComponent inside initializeApp add

this.platform.backButton.subscribeWithPriority(0, () => {
navigator['app'].exitApp();
});

for example

initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.platform.backButton.subscribeWithPriority(0, () => {
        navigator['app'].exitApp();
       
     });
    });
  }