What’s the problem?

Generally speaking, Ionic does a good job of handing navigation. Sadly, one of the things it doesn’t do well (in my opinion) is it’s handling of the hardware back button on Android. Sure, we can push a handful of views onto the screen and it will casually pop them off again every time the user presses the back button. In many cases that’s just fine – but what if we wanted something else to happen?

What if our user was half way through filling out a form and we want to make sure they’re absolutely certain about losing everything they’ve just done? To that end, what if we display just such a confirmation and when they press back it doesn’t just disappear but instead unloads the whole view and they end up losing everything anyway?

It wouldn’t be the first time we’ve had good reason to override the default functionality of the back button. With that in mind, we’ve come up with a solution to give a high level of control over the back button but with just a minimal amount of code.

Introducing: Ionic Hardware Buttons

We put together a package with the aim of addressing this problem. The plan was to make it possible for any view to dictate the actions hardware buttons while it’s active but without having to worry about subscribing to observers or listening to global events. In order to use it, all you would have to do is define a function in your current view and decorate it accordingly. From there your function would then be called automatically every time that button was pressed and give you the opportunity to change the default behavior, or not if you so decided.

Given that we’re focusing on the back button in this example, we can use the @BackButton decorator to dictate what happens when the user presses the hardware back button on their device.

So let’s get started…

Installing the Package

First off, install the package with npm

npm install @scaffold-digital/ionic-hardware-buttons --save

Next, add the package to your app’s module

...
import { HardwareButtons } from '@scaffold-digital/ionic-hardware-buttons';
...
@NgModule({
    ...
    providers: [
        ...
        HardwareButtons
        ...
    ]
    ...
})
export class AppModule { }

Next, initialize the provider somewhere early in your app (e.g. app.component.ts)

...
import { HardwareButtons } from '@scaffold-digital/ionic-hardware-buttons';
...

export class MyApp {
  constructor(
    ...
    hardwareButtons: HardwareButtons,
    platform: Platform,
    ...
  ) {
    platform.ready().then(() => {
      ...
      hardwareButtons.init();
      ...
    });
  }
}

And you’re good to go! Now you can simply add the relevant decorator for the hardware button you want to catch and write some code to be triggered.

Using the @BackButton Decorator

So, we’ve got our package installed and imported into our app. Now all we need to do is use it.

Open up the view where you want to control the back button and add something along these lines…

import { BackButton } from '@scaffold-digital/ionic-hardware-buttons';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    ...
    @BackButton()
    public onBackButton() {
        alert('Back button pushed!');
        return false;
    }
    ...
}

Now simply build this code and deploy it to an Android device. You should find that when your press the back button while your chosen view is active, an alert dialog appears and nothing else!

There are two things to pay attention to here:

  1. The Ionic Hardware Buttons package will have automatically triggered the code in your ‘onBackButton’ method. Hooray!
  2. The current view didn’t unload, because we returned ‘false’ from our ‘onBackButton’ method. We don’t have to do this, but if you want to prevent the default functionality then that’s all you need to do!

Want to know more?

You can find more information along with all of the source code for this package on our Github account.

Related resources