Subscribe to hardware backbutton on android does not work anymore

Hi,

subscribing to the hardware backbutton seems to not work anymore after i used “npm update” inside my procect. Even the first log that the button was pressed will not be shown in the console.

in my app.component.ts after deviceready i subscribe to it like the following:

this.platform.ready().then(() => {
..some code before
// active hardware back button
        this.backButtonEvent();
});

The function i use for backButton to handle different events

// active hardware back button
    backButtonEvent() {
        console.log('activate backButton...');
        this.platform.backButton.subscribe(async () => {
            console.log('BackButton pressed');

            // close action sheet
            try {
                const element = await this.actionSheetCtrl.getTop();
                if (element) {
                    console.log('actionSheet close');
                    element.dismiss();
                    return;
                }
            } catch (error) {
            }

            // close popover
            try {
                const element = await this.popoverCtrl.getTop();
                if (element) {
                    console.log('popoverCtrl close');
                    element.dismiss();
                    return;
                }
            } catch (error) {
            }

            // close modal
            try {
                const element = await this.modalCtrl.getTop();
                console.log('ChangePasswordModalIsClosable:', this.global.isChangePasswordModalClosable());


                    //wenn true darf jeder Modal geschlossen werden
                    if (element) {
                        if (this.global.isChangePasswordModalClosable()) {
                            console.log('modalCtrl close');
                            element.dismiss({cancelledModal: true});
                            return;
                        }
                        else{
                            console.log('modalCtrl no close');
                            return ;
                        }
                    }
            } catch (error) {
                console.log(error);
            }

            // close side menu
            try {
                const element = await this.menu.getOpen();
                if (element) {
                    console.log('sideMenu close');
                    this.menu.close();
                    return;
                }
            } catch (error) {
            }

            this.routerOutlets.forEach((outlet: IonRouterOutlet) => {
                console.log("routerOutlets");
                console.log(this.router.url);
                if (outlet && outlet.canGoBack()) {
                    console.log('outlet pop');
                    outlet.pop();

                } else if (this.router.url === '/menu/tabs/dashboard' || this.router.url === '/login') {
                    if (new Date().getTime() - this.lastTimeBackPress < this.timePeriodToExit) {
                        navigator['app'].exitApp(); // work in ionic 4
                    } else {
                        this.alertProvider.presentToast('PRESS_AGAIN_TO_EXIT_APP');
                        this.lastTimeBackPress = new Date().getTime();
                    }
                } else {
                    console.log("routerOutlets else")
                    this.navController.pop();
                }
            });
        });
    }

Have there been any changes?

1 Like

my ionic info:

Ionic:

ionic (Ionic CLI) : 4.12.0
Ionic Framework : @ionic/angular 4.6.2
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.4.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 3.1.2, (and 15 other plugins)

System:

NodeJS : v10.15.3 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10

Fortsetzung der Diskussion von Subscribe to hardware backbutton on android does not work anymore:

Can confirm that after updating ionic subscribing to the hardware back button does not work anymore. I have reverted my project to the following and it is working again:

Ionic:

   ionic (Ionic CLI)             : 4.12.0
   Ionic Framework               : @ionic/angular 4.2.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.5
   @ionic/angular-toolkit        : 1.4.0

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 3.1.2, (and 15 other plugins)

System:

   NodeJS : v10.15.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

So what to do when updating?

We are experiencing the same problem with @ionic/angular@4.6.2
We reverted to 4.4.2 to fix the problem.

You can fix this bug temporarily with this in v4.6.2 while does not a new version available;

I open a page from a list and within this page i open another page. So i have ListPage > Page 1 > Page 2. Now if i press the Hardware Backbutton of an Android Device it closes both Pages but it should just close Page 2. Why is this?

Just updated to ionic 4.7.0


Watch above video to get exact solution for hardware back button not working

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

https://www.damirscorner.com/blog/posts/20191122-CustomizingAndroidBackButtonInIonic4.html