Ionic 4: Hardware Back Button Reloading Application

11
votes

Working on a Project and stuck in an Issue:

Hardware Back Button Reloading Application (I am using Angular Router in this application).

My Code to Exit Application:

  ionViewDidEnter(){
      this.subscription = this.platform.backButton.subscribe(()=>{
          navigator['app'].exitApp();
      });
  }

  ionViewWillLeave(){
        this.subscription.unsubscribe();
  }

While same logic Working in other applications. but in this application its reloading the application not exiting it.

P.S: i have also tried it to put in platform.ready() but no luck.

4
androidangularionic-frameworkionic4

4 Answers

3
votes

With IONIC 4, there is new method subscribeWithPriority developed to handle race between soft & hard back button. Try modifying your code like below:

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

subscribeWithPriority() stops the propagation of the event after its execution and if we subscribe with high priority and execute our prefered navigation instead of default one then it is going to work as you want.

More reference docs for details:
https://github.com/ionic-team/ionic/commit/6a5aec8b5d76280ced5e8bb8fd9ea6fe75fe6795
https://medium.com/@aleksandarmitrev/ionic-hardware-back-button-nightmare-9f4af35cbfb0

UPDATES:

  • Try using this new version of exitApp cordova plugin. I haven't tried myself but looks promising from popularity.
  • Also try to empty the page stack from Navcontroller or go to your home screen, seems like that's causing the reload for app with sidemenu's & tab pages... this.navCtrl.pop() / this._navCtrl.navigateBack('HomeScreen'), and then call exitApp.

NOTE: Tabs & SideMenu as those have its own routing module does create lot of complexity with app navigation.

2
votes

Solved:

As Mention by @rtpHarry template of SideMenu / Tabs have History which leads application to Reload it self on root page. i was able to solve this by clearing History.

ionViewDidEnter(){
  navigator['app'].clearHistory();    
}

on Your Root Page just Clear your history and your Hardware Back Button will close the Application instead of Reloading it.

1
votes

Do you have a sidemenu in your app? I'm just curious because this seems to be when I get this problem as well.

If you look in your inspector, you will see that window.history has a length of 1.

I don't see it in some of my apps, but the app that I have a side menu setup acts this way - on the homepage if you press back the screen goes white then it reloads the app.

Like I say, looking in the inspector shows that there is a history to step back to, which it is trying to do, and whatever that history step is, it just pushes it forward back to the homepage, which made me wonder if it was the sidemenu setting up its own control of the navigation system.

I've probably said some poorly worded terminology but as I haven't solved this myself I thought I would just let you know what I had found... hopefully it helps you move forward.

In my scenario, I wasn't even trying to do the exit on back code - I just noticed that the app would appear to "reboot" if I kept pressing back.

0
votes

This explain the solution on Ionic 5 (and 4.6+ too I think).

private backButtonSub: Subscription;

ionViewDidEnter() {
  this.backButtonSub = this.platform.backButton.subscribeWithPriority(
    10000,
    () => {
        // do your stuff
    }
  );
}

ionViewWillLeave() {
  this.backButtonSub.unsubscribe();
}

also keep 

IonicModule.forRoot({
  hardwareBackButton: true
}),

to true (default) in your app.module.ts

Sources: