Android hardware back button

Ionic Framework ionic-v3
1

Well, how can i program what action the android hardware button should do in my app?
Every time i click it, my app is closed.

2

Anyone have an idea?

3

This is not implemented yet. See this file:

https://github.com/driftyco/ionic/blob/2.0/ionic/platform/platform.ts#L244-L271

And this issue:

4

While waiting for the the Ionic implementation, the back button action can be overridden by defining an event listener for the backbutton event Cordova provides:

platform.ready().then(() => {
      document.addEventListener('backbutton', () => {
          console.log('Back button tapped');
      }, false);
});

Simply providing an event listener prevents the app from closing.

1 Like
5

Hi, have you an idea of how to use this to trigger the back action when in a nested/pushed page? it should do nothing if in a root page.

6

Nailed it, kind of, this should work when calling with sidemenus, but when calling this.platform.exitApp() it should close the app window, but all i get is a white screen, any idea how do i close the full app?:

import {App, IonicApp, Platform, NavController} from 'ionic-framework/ionic';

class MyApp {
  @ViewChild('rootNavController') nav: NavController;
  init() {
    this.platform.ready().then(() => {
      // console.log('Platform ready');
      // ----------------- Disable native back button--------------------
      document.addEventListener('backbutton', () => {
        if (!this.nav.canGoBack()) {
          this.platform.exitApp()
          return;
        }
        this.nav.pop()
      }, false);
...

And in the html:

<ion-nav id="nav" #rootNavController [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
2 Likes
7

Hi, glad it helped!

As for exiting the app, try replacing

this.platform.exitApp()

with

navigator.app.exitApp()

and see if that works?

2 Likes
8

Tried that but the typescript linter says that navigator has no member app.

9

I think that’s just a problem with missing definitions, ie. it would work if it got past the linter.

I’m not a typescript expert, but there seem to be type definitions for cordova available at http://definitelytyped.org/tsd/

Installing those would probably fix the linting error.

10

It actually works, it minimizes it which is an expected behavior, i have a tsd.json so i just need to install the tsd for Cordova right?

11

But which one? cordova? cordova-ionic?
I installed both but still the same, the linter jumps in my face.

12

I’m just guessing here since I don’t know much about typescript, but I’d say try cordova since the function you’re looking for is part of the core cordova functionality and not related to Ionic.

13

Late edit, the error remains even after installing both.

14

thanks luchillo17 , thanks Klasu
it work like a charm

15

The cordova tsd doesn’t include the toast plugin tsd, at the end i added manually to the tsd.d.ts an interface to Plugins in order to add the toast plugin.

16

Even though this is a month later…FYI, if you haven’t fixed this sort of issue before do this:

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

  2. Add a file called pluginshackyhacky.d.ts

  3. Add:

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

for properties you need extended for TypeScript to compile

  1. Add the whatever.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.

17

whats content of phonegap.d.ts?

18

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/phonegap/phonegap.d.ts

1 Like
19

Thanks, maybe this should be default file for ionic base app?

20

Some of this has been rendered unnecessary now with ionic native. Although not all of it, so I just comment out the bits as and when they are no longer needed.

Note: you still need to actually install the plugins required, ionic native is just a wrapper to make the syntax all nice and cosy for typescript and angular 2.