I have looked around and followed some advice on the forum. Got handleAndroidBackButton code from framework7 cli repo. framework7-cli/capacitor-app.js at master · framework7io/framework7-cli · GitHub
And did something like this in App.vue. Not sure if that’s the correct way to do it.
<script setup>
import { onMounted, ref } from "vue";
import { App as CapacitorApp } from "@capacitor/app";
import {
f7,
f7ready,
f7App,
f7Views,
f7View,
f7Panel,
} from "framework7-vue";
import { getDevice } from "framework7/lite-bundle";
import capacitorApp from "./js/capacitor-app.js";
const device = getDevice();
onMounted(() => {
fetchSettings();
f7ready(() => {
// Init capacitor APIs (see capacitor-app.js)
if (device.capacitor) {
capacitorApp.init(f7);
}
document.addEventListener("backbutton", (e) => {
handleAndroidBackButton();
});
});
});
function handleAndroidBackButton() {
var f7 = capacitorApp.f7;
const $ = f7.$;
if (f7.device.electron || !window.Capacitor || !window.Capacitor.Plugins.App)
return;
window.Capacitor.Plugins.App.addListener(
"backButton",
function () {
if ($(".actions-modal.modal-in").length) {
f7.actions.close(".actions-modal.modal-in");
return;
}
if ($(".dialog.modal-in").length) {
f7.dialog.close(".dialog.modal-in");
return;
}
if ($(".sheet-modal.modal-in").length) {
f7.sheet.close(".sheet-modal.modal-in");
return;
}
if ($(".popover.modal-in").length) {
f7.popover.close(".popover.modal-in");
return;
}
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();
return;
}
}
f7.popup.close(".popup.modal-in");
return;
}
if ($(".login-screen.modal-in").length) {
f7.loginScreen.close(".login-screen.modal-in");
return;
}
if ($(".page-current .searchbar-enabled").length) {
f7.searchbar.disable(".page-current .searchbar-enabled");
return;
}
if ($(".page-current .card-expandable.card-opened").length) {
f7.card.close(".page-current .card-expandable.card-opened");
return;
}
const currentView = f7.views.current;
if (
currentView &&
currentView.router &&
currentView.router.history.length > 1
) {
currentView.router.back();
return;
}
if ($(".panel.panel-in").length) {
f7.panel.close(".panel.panel-in");
return;
}
f7.dialog.confirm("Are u sure you want to exit?", function () {
CapacitorApp.exitApp();
});
},
false
);
}
</script>
It works if router is one level deep. If I go to page X and then hit android back button, it comes back fine and pressing it second time, it shows confirm dialog to exit the app.
But if I go to page X and then page Y. Pressing the back button first time takes it back to page X and on the second attempt, it tried to exit the app instead of coming back to the homepage normally.
I think the problem is currentView.router.history.length > 1 . I have console.log(props.f7router.history.length); on all 3 pages and when it comes to homepage on initial app load, history length is 0, when I go to page X, it’s 1 and when I go to page Y, it’s 2. Then coming back to page X, history length is back to 1 and then pressing back button again, it tried to quit because history length is not bigger than 1.
I’m not sure what am i doing wrong and how to fix this. Any help would be really appreciated.