Implement platform hardware back button functions

[mhartington]

From @ydeshayes on November 6, 2015 11:3

Hello,

when i tap the android (hardware or not) back button, the app closed. I see in the code that a function is predicted but not implemented (https://github.com/driftyco/ionic2/blob/076dc7645edfd2d216a8f0f7bf52abca6b6be35e/ionic/platform/platform.ts line 161).

Did you think about integrate this back button with the navigation behavior ? (touching the android back button call navigation.pop() for example) or do we have to implement it ourselves ?

thanks !

Copied from original issue: driftyco/ionic2#462

[mhartington]

From @adamdbradley on November 7, 2015 16:1

Yes Ionic be able to handle this like it did in v1, just haven't completed it yet.

[phavre]

Agree, nice to have

[tomsun]

FYI I'm using something like this as a workaround, until Ionic 2 provides something. Seems to get the job done... Not entirely generic though.

This particular app has a sub-page with a Tabs component, i.e. multiple NavControllers are involved - hence some additional complexity.

(If a Modal is active, the back button still exits the app when using this code)

app.js

import {ViewChild} from 'angular2/core';
import {App, Platform, NavController} from 'ionic/ionic';
import {RootPage} from './pages/root/root';
import {TabsPage} from './pages/tabs/tabs';

@App({
  template: '<ion-nav #rootNavController [root]="root" #content swipe-back-enabled="false"></ion-nav>'
})
export class SomeApp {
  @ViewChild('rootNavController') nav:NavController;

  constructor(platform: Platform) {
    this.root = RootPage;

    platform.ready().then(() => {
      // Do any necessary cordova or native calls here now that the platform is ready

      // Handle Android's back button
      // https://cordova.apache.org/docs/en/latest/cordova/events/events.backbutton.html
      // This handler might be redundant and/or undesired with future versions of Ionic 2:
      // https://github.com/driftyco/ionic/issues/5071
      document.addEventListener('backbutton', () => {
        let activeVC = this.nav.getActive();
        let page = activeVC.instance;

        if (!(page instanceof TabsPage)) {
          if (!this.nav.canGoBack()) {
            console.log('Exiting app due to back button press at the root view');
            return navigator.app.exitApp();
          }
          console.log('Detected a back button press outside of tabs page - popping a view from the root navigation stack');
          return this.nav.pop();
        }

        let tabs = page.tabs;
        let activeNav = tabs.getSelected();

        if (!activeNav.canGoBack()) {
          console.log('Exiting app due to back button press at the bottom of current tab\'s navigation stack');
          return navigator.app.exitApp();
        }

        console.log('Detected a back button press - popping a view from the current tab\'s navigation stack');
        return activeNav.pop();

      }, false);
    });
  }
}

tabs.js

import {ViewChild} from 'angular2/core';
...
export class TabsPage {
  @ViewChild('mainTabs') tabs:Tabs;
...

tabs.html

<ion-tabs #mainTabs>
...