Handling the hardware back buttons

ionic-v1
1

Working with Ionic v0.9.24 at the moment and I’m having a problem where the hardware back button on Android devices is closing the app instead of navigating back in the stack.

Is there something special I have to do to get this to use the history first then close the app?

tried a few things like listening for the backbutton event and calling e.preventDefault(); but that didn’t do anything.

Cordova v3.4.0

3 Likes
2

Unfortunately, I have no Android experience; so I have no info. Anyone out there with some Android experience that can help out?

1 Like
3

From the looks of it Cordova should be taking care of it but isn’t. Might not be an Ionic issue at all.

4

Yes, the hardware back button should work, I’ve used it with my HP slate 7 running android 4.1. What version of android are you using?

Also, you should trying to upgrade the latest version of ionic to get the best available performance

5

Hey guys,

I exactly have the same problem here.
Using AngularJS 1.3.0-beta, Ionic 1.0.0 Beta and Phonagap/Cordova 3.4.0 on Android 4.4 tablets and phones.

If you hit the android back button the app is closed immediately.
I tried to overwrite the native back button behaviour.
Listen for the backbutton event, prevent, stop propagate it and do the back handling on my own. I can catch the event, but after that the app is closed anyway.

Greets and Bye.

6

Do you mind putting together a codepen or plnkr? It can help us find the issue much quicker

7

I do not know if it is possible with only some code snippets.
But i can try to describe it a little bit more in detail.

I have an anuglarjs app built up with ionic and requirejs.
My angularjs routings are done with ui-router and $stateProvider.
In the app i navigate over $location.path(path) and back with $window.history.go(-steps).

After I bootstrap my angular app I hang in some event listeners - something like that:

document.addEventListener('deviceready', function () {
  document.addEventListener('backbutton', function (event) {
    event.preventDefault();
    event.stopPropagation();
    console.log('hey yaaahh');
  }, false);
}, false);

If i tap on the android backbutton, i get my console log, but the app will be closed anyway.

Thank you!

Bye.

2 Likes
8

You should try to this ionic function

 $ionicPlatform.onHardwareBackButton(function() {
     event.preventDefault();
     event.stopPropagation();
     alert('going back now y'all');
  });

This is specifically made for android hardware buttons

http://ionicframework.com/docs/api/service/$ionicPlatform/

3 Likes
9

Sadly, but true -> it produces the same behaviour. :frowning:

10

Hmm, can you try this with beta 3?

11

Wuaahh, with the new Beta my app gets broken.

Some strange angularjs errors, that some of my directives needs ionList…

Maybe the ionList changes in that version?

Greets.

12

Yeah the list chagned in version 2

13

I’ve updated to 1.0.0 Beta 3 but it does not change anything.

Thanks for your help.

14

Let me throw something together and see whats happening. I’ll report back in an hour or so

15

Okay here it is late at night, so i will check your post tomorrow ;).

Thanks and good night!

16

I fixed it:

$ionicPlatform.registerBackButtonAction(function () {
  if (condition) {
    navigator.app.exitApp();
  } else {
    handle back action!
  }
}, 100);

$ionicPlatform.registerBackButtonAction allows you to completly overwrite back button behavior.
First param is a callback function and the secondone a priority (only the callback with the highest priority gets executed).

7 Likes
17

The above didn’t work for me but turns out I didn’t fully update my apps markup when updating Ionic version.

I was still using <div ui-view></div> with <nav-page> once I changed them to <ion-nav-view> and <ion-view> everything works again!

18

Please provide codepen for the above functionality.

1 Like
19

Thank you! It is working fine for me

20

Thanks, registerBackButtonAction works, but it catches ALL back button actions,not only the controller I put the code in.
I want only one specific view to have a different behaviour (close the app on Back).
How can I keep default Back action on other views while having a special action on one view?

Edit (found):

  // Disable BACK button on home
  $ionicPlatform.registerBackButtonAction(function (event) {
    if($state.current.name=="app.home"){
      navigator.app.exitApp();
    }
    else {
      navigator.app.backHistory();
    }
  }, 100);
11 Likes