How to exit the app on "Back" button on Adnroid?

I’ve been trying to make the app to exit when there is no modals, sheets, etc. open. My app doesn’t have any routes so I don’t need “Back” button to go back in history.

I tried to fiddle with the “backbutton” event handler on cordova-app.js by rewriting all if conditions to else-if blocks, but had no luck. Any ideas or suggestions?

Search in the forum, there are some anwers.

There are answers for version below 6.0. Before upgrading to 6.0 I had my own handler which worked perfectly. With 6.0 I wanted to use built-in method, but it doesn’t work quite I need.

i use f7 v6 + svelte.

in my src/js/cordova-app.js (in method handleAndroidBackButton):
document.addEventListener(‘backbutton’, function (e) {

f7.dialog.confirm(‘a u sure?’, function () {
navigator.app.exitApp();
});
}, false);

it works

1 Like

This is insufficient, you need to be able to close popups and popups with back button also. I need to figure out how to exit only if there is no popups, popover and other modals open before exiting the app.

Yes, it is. All code of method: (exit only if there is no popups, popover and other modals…)

handleAndroidBackButton: function () {
  var f7 = cordovaApp.f7;
  const $ = f7.$;
  if (f7.device.electron) {
    return;
  }
  document.addEventListener('backbutton', function (e) {
    if ($('.actions-modal.modal-in').length) {
      f7.actions.close('.actions-modal.modal-in');
      e.preventDefault();
      return false;
    }
    if ($('.dialog.modal-in').length) {
      f7.dialog.close('.dialog.modal-in');
      e.preventDefault();
      return false;
    }
    if ($('.sheet-modal.modal-in').length) {
      f7.sheet.close('.sheet-modal.modal-in');
      e.preventDefault();
      return false;
    }
    if ($('.popover.modal-in').length) {
      f7.popover.close('.popover.modal-in');
      e.preventDefault();
      return false;
    }
    if ($('.popup.modal-in').length) {
      if ($('.popup.modal-in>.view').length) {
        const currentView = f7.views.get('.popup.modal-in>.view');
        if (currentView && currentView.router && currentView.router.history.length > 1) {
          currentView.router.back();
          e.preventDefault();
          return false;
        }
      }
      f7.popup.close('.popup.modal-in');
      e.preventDefault();
      return false;
    }
    if ($('.login-screen.modal-in').length) {
      f7.loginScreen.close('.login-screen.modal-in');
      e.preventDefault();
      return false;
    }
    if ($('.page-current .searchbar-enabled').length) {
      f7.searchbar.disable('.page-current .searchbar-enabled');
      e.preventDefault();
      return false;
    }
    if ($('.page-current .card-expandable.card-opened').length) {
      f7.card.close('.page-current .card-expandable.card-opened');
      e.preventDefault();
      return false;
    }
    const currentView = f7.views.current;
    if (currentView && currentView.router && currentView.router.history.length > 1) {
      currentView.router.back();
      e.preventDefault();
      return false;
    }
    if ($('.panel.panel-in').length) {
      f7.panel.close('.panel.panel-in');
      e.preventDefault();
      return false;
    }
    f7.dialog.confirm('a u sure?', function () {
      navigator.app.exitApp();
    });
  }, false);
},
1 Like

I’m sorry, but I tried this myself and as I said before, this does not work.

  1. The confirmation only appears when there is a modal or a panel open. This is completely opposite of what I need.
  2. …and when I actually need the confirmation to appear i.e. when there is no modal or panels open, it doesn’t appear.

It seems that the following code

e.preventDefault();
return false;

does not work as intended. It does not provide exit from the method body and all code after if statements is still executed.

After some effort, I’ve found the solution.

It turns out, the back button handler in cordova-app.js for some reason is executed twice. To fix this, simply remove the handler and put the code in the app.vue (or similar for your framework) mounted() method.

Could you please tell about it in details?