Disable mobile hardware back button in ionic 2

Question

We have been working on a business application and facing a very strange issue. Whenever we press the mobile hardware back button, application GUI gets disturbed. We have already spent a lot man hours on this problem but issue is still there.

I was thinking about to disable back button but I don't know how to do it in ionic 2. Could anybody tell me how can I disable hardware back button in ionic 2 or angular ?

@Mansoor, checkout this article https://www.gajotres.net/ionic-2-3-how-to-manage-hardware-back-button-event-like-a-pro/ — Sagar, Aug 02 '18 at 08:03
I have the same issue with a cordova (not ionic) app and I also deactivated the backbutton. I suspect that this has to do with caching, but I'mn not sure. There is a cordova plugin to disable webview caching, you might want to try it (it did not work for me though: https://github.com/kroodle/cordova-disable-http-cache) — David, Aug 02 '18 at 08:34

score 1 · Answer 1 · answered Aug 02 '18 at 07:51

Generally speaking, I don't think it is a good idea to disable or override native functionality as it could confuse the user, but it should be possible to define custom behavior for the back button using the registerBackButtonAction method in the Platform API:

https://ionicframework.com/docs/api/platform/Platform/#registerBackButtonAction

Krishna Rathore · Answer 2 · 2018-08-02T13:09:32.427

0

You can use registerBackButtonAction

Read Ionic Device Document

import { App } from 'ionic-angular';

constructor(public  app: App) {}

this.platform.registerBackButtonAction(() => {
    let nav = app.getActiveNavs()[0];
    if (nav.canGoBack()){ //Can we go back?
        nav.pop();
    } else {
        const alert = this.alertCtrl.create({
            title: 'App termination',
            message: 'Do you want to close the app?',
            buttons: [{
                text: 'Cancel',
                role: 'cancel',
                handler: () => {
                    console.log('Application exit prevented!');
                }
            },{
                text: 'Close App',
                handler: () => {
                    this.platform.exitApp(); // Close this application
                }
            }]
        });
        alert.present();
    }
});

edited Aug 02 '18 at 13:09

answered Aug 02 '18 at 08:51

Krishna Rathore

9,389
5
24
48

Actually, I have already tried this option. We can capture the register event but don't how to prevent it going back. – Mansoor Aug 02 '18 at 12:53
Can we disable URL in ionic 2 ? When we navigate, url gets change. But can we prevent it to change? I mean rather than this http://localhost:8100/#/somepage , can we make it just http://localhost:8100 ? – Mansoor Aug 02 '18 at 12:59
still having the same problem :(. Can we disable url with lazy loading in ionic 2 ? – Mansoor Aug 02 '18 at 13:43
Application doesn't exit, it still goes to the back page. this.platform.exitApp() works fine in apk/iPA but not in PWA. – Mansoor Aug 02 '18 at 13:48

Disable mobile hardware back button in ionic 2

2 Answers2