Ionic Capacitor hardware back button is automatically closing the app

Question

My current setup is:

@capacitor/core: 3.0.0, @ionic-native/core: 5.0.7

I'm trying to change the behavior of my app to not close the app, but go back in the navigation stack. To my knowledge, the hardware back button on Android devices did not automatically close the app until I upgraded Capacitor to 3.0.0

What is confusing me though, is how I have absolutely 0 code for handling the back button functionality, and from everything I'm searching online shows the back button doing nothing by default, not automatically closing the app as the default (as mine seems to be doing). I've searched all the project files for anything to do with "platform", "backButton", and "App.Exit" and was unable to find any code that may be causing the app to close.

I've tried subscribing to the back button press event using the below code and it is never ran. The app closes instead of showing the alert dialog. I've changed the priority from 0, 10, and 99 (all priorities listed in the Ionic documentation)

this.platform.backButton.subscribeWithPriority(10, () => {
  alert('Back button pressed!');
});

Answer 1

1. Install capacitor app.

   npm install @capacitor/app

2. Import it.

   import { App as CapacitorApp } from '@capacitor/app';

3. Add back listener if can go back then we can push to back or exit the app.

   CapacitorApp.addListener('backButton', ({canGoBack}) => {
     if(!canGoBack){
       CapacitorApp.exitApp();
     } else {
       window.history.back();
     }
   });
   

Answer 2

So, I feel a bit dumb after realizing this, but it is because I had to run the below commands, because I apparently didn't update them when upgrading Capacitor a while back. Make sure all of your plugins are fully updated, yours may be different than mine.

npm install @capacitor/app
npx cap sync

Answer 3

I had the same issue and I tried installing all the plugins like it says here

npm install @capacitor/app @capacitor/haptics @capacitor/keyboard @capacitor/status-bar

After I finished installing, I still got the error. Also my PushNotifications plugin was not working either.

My problem was I forgot to delete the OnCreate method from MainActivity.java. So if you still have the problem after installing the plugins, try to delete OnCreate method so your MainActivity.java looks like this:

 public class MainActivity extends BridgeActivity {}

See more here.

It also fixed my PushNotifications plugin.

If I understand it correctly, if you have any plugin that is not registered correctly, it will cause this kind of error. This answer also helped me.

Answer 4

https://stackoverflow.com/a/69084017/19086322

This post work really good for me !!

Before this post i made these commands and after it worked:

npm install @capacitor/app                                             
npx cap sync

Answer 5

I have the same issue and adding @capacitor/app to my App worked for debugging puposes. The Problem is, when I build a release app, it still closes the app.

--- EDIT ---

I fixed the issue by building a completely new Ionic App (with the latest versions of everything) and then copying my code. I assume it really had something to do with the installed versions of the Ionic and Capacitor packages

Answer 6

You need to use below code to handle the Hardware back button in Ionic app:

//back button handle
//Registration of push in Android and Windows Phone
let lastTimeBackPress: number = 0;
let timePeriodToExit: number = 2000;

platform.registerBackButtonAction(() => {

    //Double check to exit app
    if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
        //this.platform.exitApp(); //Exit from app

        this.appMinimize.minimize().then(() => {
            console.log('minimized successfully');
        });
    } else {

        this.toastCtrl.create({
            message: this.translate.instant('EXIT_APP_MESSAGE'),
            duration: 3000,
            position: 'bottom'
        }).present();

        lastTimeBackPress = new Date().getTime();
    }
});

Answer 7

for android:

import android.webkit.WebView;
import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
    //in my case I call it the JS function when I press the back button
    @Override
    public void onBackPressed() {
        WebView webView = getBridge().getWebView();

        webView.loadUrl("javascript:pressBack()");

        // in Index.html create tag
        //<script type="text/javascript">
        //   function  pressBack(){
        //      alert('yes!!')
        //   } 
        //</script>

        return;
    }
}