Ionic Back Button

Question

I have basic Ionic application which I have disabled the back button on the app, is there a reason why the back button still works on an android device?

I am currently testing with ionic view.

here's my code:

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
  $ionicPlatform.registerBackButtonAction(function(e) {
  e.preventDefault();
  }, 101);
})

Answer 1

For anyone trying to sort this on Ionic 2:

http://www.codingandclimbing.co.uk/blog/ionic-2-android-back-button-13

and here's the actual post info:

In your app.ts, do the following to get the back button working as expected (mostly!):

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

  registerBackButtonListener() {
    document.addEventListener('backbutton', () => {
      var nav = this.getNav();
      if (nav.canGoBack()) {
        nav.pop();
      }
      else {
        this.confirmExitApp(nav);
      }
    });
  }


confirmExitApp(nav) {
    let confirm = Alert.create({
      title: 'Confirm Exit',
      message: 'Really exit app?',
      buttons: [
        {
          text: 'Cancel',
          handler: () => {
            console.log('Disagree clicked');
          }
        },
        {
          text: 'Exit',
          handler: () => {
            navigator.app.exitApp();
          }
        }
      ]
    });
    nav.present(confirm);
  }

  getNav() {
    return this.app.getComponent('nav');
  }

Note:

If you get errors about app not being a property of navigator:

1) Add a typings folder to your app root: e.g. app/typings

2) Add a file called: pluginshackyhacky.d.ts

3) Add for properties you need extended for TypeScript to compile.:

interface /*PhoneGapNavigator extends*/ Navigator {
    app: any;
}

4) Add the pluginshackyhacky.d.ts to the compile in the tsconfig.json:

  "files": [
    "app/app.ts",
    "app/typings/pluginshackyhacky.d.ts",
    "app/typings/phonegap.d.ts"
  ]

You can see that I've also included the phonegap.d.ts file which includes a lot of missing properties/variables that allows TypeScript to compile without errors.

Hope this helps anyone having this problem.

Cheers.

Answer 2

According to ionic documentation

Your back button action will override each of the above actions whose priority is less than the priority you provide.

And given that you want to completely disable the back button in all situations, and that the highest priority on actions in the referenced list is 500, you should provide a priority value more than 500, 600 for example. The code below should work when placed in $ionicPlatform.ready()

 $ionicPlatform.registerBackButtonAction(function(e) {}, 600);