bug: Android hardware back button stops working after redirecting navigation

[pjc2007]

Bug Report

Ionic version:
[x] 4.x

Current behavior:

I have an Ionic 4 application where I have a service where I intercept the Angular routers NavigationStart events as follows..

 export class AppRoutingService {
      private currentNavigationForward: RoutingPartsModel;
      private rootNavigation: string;


      constructor(
        private navCtrl: NavController,
        private router: Router,
        private logger: Logger
      ) {
        // Monitor NavigationStart so we can look for a back button and redirect to home
        // page if need be
        this.router.events.pipe(
          filter(e => e instanceof NavigationStart))
          .subscribe((ev: NavigationStart) => {
            this.handlePageRouting(ev)
          });
      }

I want to do this as I have an application wide side menu with shortcuts to each of my feature pages. If a user goes to a feature page from this menu, then I want the back button to then goto the Home page, and NOT the previous feature page where it may have navigated from.

I do this my keeping track of each route forward, and then in the handlePageRouting I have the following code

if (this.currentNavigationForward.params.fromSideMenu) {
            this.currentNavigationForward = undefined;
            this.navigateRoot = undefined;
            this.logger.debug('handlePageRouting - Navigating to home');
            this.router.navigateByUrl(Constants.vals.pageRoutePaths.home);
          }

This all seems to work fine, however, I find that as soon (or soon after) I have had an instance where the above code executes the this.router.navigateByUrl(Constants.vals.pageRoutePaths.home), the Android hardware button stops working. If I go to another feature page from the home page, the hardware back button does nothing. It does not cause a NavigationStart event, nor is the following subscription called when on my home page.

this.backButtonSubscription = this.platform.backButton.subscribe(() => {   
            this.backButtonSubscription.unsubscribe();
            this.logger.info('Home exiting app via back button');
            navigator['app'].exitApp();
          });

However, the toolbar back button does still work, it is only the hardware buttons that stops working, and never recovers until I exit the app, and restart.

Expected behavior:
I would like the hardware button to keep working after I have had to intercept and do the redirect to the Home page

Steps to reproduce:
Run the sample application on an Android device
From the Home page, first show the hardware back button works by using a button to go to either feature 1 or feature 2, and then the back button returns to Home page.

Even if we go to feature1, and then feature 2 via the button on feature 1, the hardware back button will return down the stack as expected. Also, back button from home will exit the app due to the Home page subscription this.platform.backButton.subscribe().

Now, to recreate the issue, go to feature1 via the Home page button, but now drag the side menu open, and goto feature 2.

Use hardware backbutton, and the this.router.navigateByUrl('/home'); in AppRoutingService will return us to the Home page (as we want).

From now on, the hardware back button will not work. We will not see console.log('handlePageRouting'); being logged any more

Related code:
A sample application via GitHub
Sample app to demonstrate this is at https://github.com/pjc2007/backbuttonprob.git

-->

Other information:
Reported this exact thing on Stack Overflow
https://stackoverflow.com/questions/56112539/ionic-4-android-hardware-back-button-stops-working-after-intercepting-navigation

Ionic info:
Ionic:

   ionic (Ionic CLI)             : 4.12.0 (C:\Users\Latitudeuser\AppData\Roaming\nvm\v10.15.0\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.4.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   cordova (Cordova CLI) : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms     : android 8.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 4 other plugins)
System:

   Android SDK Tools : 26.1.1 (C:\Android\android-sdk)
   NodeJS            : v10.15.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

[pjc2007]

Hi, wondering if any thoughts on this one yet, I have yet to find a way around it.

[huahuichin]

In my case, it only works when the app open first time. After navigating to next component, it can back to the previous page but not exit app.

[pjc2007]

@huahuichin - did you subscribe to the platform.backButton? Need to do this to exit the app, eg from above

this.backButtonSubscription = this.platform.backButton.subscribe(() => {   
            this.backButtonSubscription.unsubscribe();
            this.logger.info('Home exiting app via back button');
            navigator['app'].exitApp();
          });

In my case all this works until I use the this.router.navigateByUrl as explained above. After this, the software back button still works, but not the hardware one.

[pjc2007]

Hi, just wondering of anyone had a change to look at this? I can still find no other way of doing what I need to do.

Cheers!

[libattistella]

Hi! Same issue for me, the subscription to hardware back button isn't working. I also tried to use
this.platform.backButton.subscribeWithPriority(9999, () => { // console.log('Success'); });

But this code does't work either

[Deathstarke]

Same here in Ionic 4, the event never gets fired when I press the android back button, I have tried all the above methods. Also tried it with a fresh Ionic 4 project without success.

[Gamaroff]

Getting the same problem.
The only thing that works is:

document.addEventListener('backbutton', () => {}, false);

[aniciom]

Like @Gamaroff said, the only solution for this problem atm is bind a listener to that event, i couldn't get it working using the ionic4's apis. I'm using the lastest version of ionic.

Maybe its related to #17824 and the regressions's issues they got in the lastest version, hope they fix it soon.

[libattistella]

In my case, before update the ionic libraries of my project, my app was working fine (ionic v4) and I was able to subscribe to platform.basckButton, but after update to the lastest version, this sibscription stop working

[aniciom]

Yep same here @libattistella

[libattistella]

With these versions, my application is working again and I have successfully subscribed to the backButton. I hope it helps
"@angular/common": "^7.2.2", "@angular/core": "^7.2.2", "@angular/forms": "^7.2.2", "@angular/http": "^7.2.2", "@angular/platform-browser": "^7.2.2", "@angular/platform-browser-dynamic": "^7.2.2", "@angular/router": "^7.2.2", "@ionic-native/core": "^5.9.0", "@ionic-native/screen-orientation": "^5.9.0", "@ionic-native/splash-screen": "^5.9.0", "@ionic-native/status-bar": "^5.9.0", "@ionic/angular": "^4.6.0", "@ionic/storage": "^2.2.0", "cordova-android": "^8.0.0", "cordova-plugin-device": "^2.0.3", "cordova-plugin-ionic-keyboard": "^2.1.3", "cordova-plugin-ionic-webview": "^4.1.1", "cordova-plugin-screen-orientation": "^3.0.2", "cordova-plugin-splashscreen": "^5.0.3", "cordova-plugin-statusbar": "^2.4.3", "cordova-plugin-whitelist": "^1.3.4", "cordova-sqlite-storage": "^3.2.1", "core-js": "^2.5.4", "es6-promise-plugin": "^4.2.2", "rxjs": "~6.5.2", "tslib": "^1.9.0", "zone.js": "~0.9.1"

[RicardoElSabio]

this.platform.backButton.subscribe() doesn't even work for me, I am using ionic 4.6.2

[libattistella]

Update to 4.7.1 or later.

Regards

[alphagamer7]

Confirming that it doesn't work on 4.10.0

[moh4sa]

any fix for this issue?

[pjc2007]

@moh4sa - I never got a work around for it, I had to disable some of my app functionality for Android. I haven't tried Ionic 5 yet as I can't use v5 as it is broken for Windows (Tabs) - which I have to support as well.

[1antares1]

In my case, I implemented the "exitApp" after the subscription in the app.component.

It works when you go between pages, but it does not reach the event if it is the first time you open the application, it closes it for me at once.

It's Ionic 5. :/

[liamdebeasi]

Hi everyone,

As of Ionic Framework v5.1.0 most of the outstanding hardware back button issues have been resolved, including the issue noted in the original post. As a result, I am going to close this issue.

To better support the hardware back button integration in Ionic Framework, we launched a dedicated Hardware Back Button Documentation Page that I recommend taking a look at.

If you are still running into issues with the hardware back button on the latest version of Ionic Framework, please create a new issue and include a code reproduction. Thank you!