Develop Reference

Angular 7 Cordova 8 backbutton override not working

I'm developing an app with Angular 7 and Cordova 8. I want to override the cordova back button event, to prevent the app from closing by adding an event listener as described in the cordova docs
My code looks like this:
let onDeviceReady = () => {
enter code hereconsole.log("Bootstraping Module...")
document.addEventListener("backbutton", (e) => {e.preventDefault(); e.stopPropagation(); console.log("backbutton"); return false;}, false);
platformBrowserDynamic().bootstrapModule(AppModule);
};
document.addEventListener('deviceready', onDeviceReady, false);
According to the docs this should prevent the app from closing. I know that the preventDefault, stopPropagation and return false calls are not necessary, but I found the as possible solutions to my problem, which all didn't work.
When I press the back button, I see the backbutton print, however, the app is still closing.
Tested on Android.
Update: After debugging the issue using logcat I could see the message WARNING: Back Button Default Behavior will be overridden. The backbutton event will be fired! which is logged in the CoreAndroid plugin class when the back button is overriden in the native Android app. Still when I press the button, the app exits
Update: The issue was related to OnsenUI, see my answer below

We handed the backbutton logic in app.component.ts ngOnInit
import {Renderer2} from '#angular/core';
constructor(private renderer: Renderer2){}
ngOnInit(){
const devicebackbutton = this.renderer.listen('document', 'backbutton', e => {
e.preventDefault();
e.stopPropagation();
return false;
});
}

I managed to solve the issue. It wasn't caused by Cordova or Angular, but by OnsenUI, which I used for input components.
By default it overwrites all cordova handlers for the backbutton, as it provides its own functionality. You can read more here

Ionic onHardwareBackButton implementation

I'm trying to control how the android hardware back button behaves in my app. I had it all working but now I can't reproduce it. The code I'm using is in app.js. I'm expecting the back button to do nothing but write to the console.
.run(function($ionicPlatform) {
$ionicPlatform.onHardwareBackButton(function() {
console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!")
});
Can any one see what the problem is? I'm running ionic CLI v1.7.11. I'm running the code with ionic view on android

You can find full details, including a full working solution for both hard & soft back buttons at my related post:
Ionic override all BACK button behaviour for specific controller
To summarise how I handled the hardware back button, the trick is to register an action for the Back button, using code like this:
var doCustomBack= function() {
// do something interesting here
};
// registerBackButtonAction() returns a function which can be used to deregister it
var deregisterHardBack= $ionicPlatform.registerBackButtonAction(
doCustomBack, 101
);
$scope.$on('$destroy', function() {
deregisterHardBack();
});
The actual setting is done in that second block calling $ionicPlatform.registerBackButtonAction().
This returns a method that can be called to deregister the action later on if you want to.

It was a ionic view problem. Seems it does not support this.

Close cordova app on back button

I have the following logic for my mobile app using cordova and angular.js
Process my logic in mobile.js included in index.html like saving the files on sdcard then redirect the user to the second html page using
window.location.href="main.html";
which will use the files put in sdcard by mobile.js
The issue I'm facing is that when I am on the homepage on main.html and the user presses the back button it comes back to the index.html file and then, after processing goes back to main.html instead of App closing.
I tried using the history.length object with the "backbutton" eventListener
document.addEventListener('deviceready',function(){
document.addEventListener('backbutton',function(e){
console.log("history is "+history.length);
if(history.length==1){
e.preventDefault();
navigator.app.exitApp();
}
else{
navigator.app.backHistory();
}
},false);
},false);
but it doesn't decrease the length when going back, only increases it, so the app goes back to index.html.(history.length is always greater than 1)
I have looked the solution available, like
document.addEventListener("backbutton", function(e){
if($.mobile.activePage.is('#homepage')){
/*
Event preventDefault/stopPropagation not required as adding backbutton
listener itself override the default behaviour. Refer below PhoneGap link.
*/
//e.preventDefault();
navigator.app.exitApp();
}
else {
navigator.app.backHistory()
}
}, false);
but the issue in using it is, if the user goes to
second-page->homepage->third-page->homepage
the app will exit, but instead should go to the third-page.

You could use the jQuery mobile pageload event to keep your own history list, whose length does decrease when you go back. Something like this (untested off the top of my head, so might not be exactly correct):
var pageHistory = [];
$(document).on("deviceready", onDeviceReady);
function onDeviceReady(){
$(document).on("pagecontainerload", onPageLoad);
$(document).on("backbutton", onBackButton);
}
function onBackButton(e){
e.preventDefault();
pageHistory.pop();
if(pageHistory.length==0){
navigator.app.exitApp();
}
else{
navigator.app.backHistory();
}
}
function onPageLoad(e, ui){
var pageId = ui.toPage.attr('id');
if(pageId !== pageHistory[pageHistory.length]){
pageHistory.push(pageId);
}
}

JQuery Mobile prevent back page navigation [duplicate]

This question already has an answer here:
How to disable the default JQM page in a SPA?
(1 answer)
Closed 8 years ago.
I've seen a couple of posts on this topic but none of them offered a suitable solution.
Once a user navigates to the next page I want to prevent him from going back to the previous ones. I have no back buttons in my pages but back navigation is still possible by tablet/phone device back button.
I believe it's something with preventDefault and stopImmediatePropagation but I don't know how to target the device/browser back button.

I found a good way of doing this, tested it with android and it's working fine.
First of all, make sure you have cordova.js added to your library.
Second, add the following just above the closing header tag, inside:
<script>
function onLoad() {
document.addEventListener('deviceready', deviceReady, false);
}
function deviceReady() {
document.addEventListener('backbutton', backButtonCallback, false);
}
function backButtonCallback() {
navigator.notification.confirm('do you want to exit the app?',confirmCallback);
}
function confirmCallback(buttonIndex) {
if(buttonIndex == 1) {
navigator.app.exitApp();
return true;
}
else {
return false;
}
}
</script>
Third and final, change your starting body tag with:
<body onload="onLoad()">

Phonegap Android back button override

In my Phonegap app, created in a single html file using div as pages, I override the Back button to exit the app, only if the div that acts as the Home page is visible, otherwise to hide the others and show the home div. I use jQuery to attach the event handlers.
It works well at first app launch, but if the app is in the History list, the override is not working, the Back button exits the app without checking which div is visible. After deleting the app from the History list it works as expected again.
Tested on Nexus 4 with Android 4.2.
Here is the code:
$(document).on('backbutton', function (ev) {
ev.preventDefault();
if (!$('#divHomeScreen').is(':visible')) {
$('.screen').hide();
$('#divHomeScreen').show();
return false;
} else {
navigator.app.exitApp();
}
});
Thanks for your help.

What I have done is dynamically add and remove the backbutton handler as needed. For example...
function showScreen()
{
$("#divHomeScreen").hide();
$(".screen").show();
$(document).on("backbutton", onBackButton);
}
function hideScreen()
{
$(".screen").hide();
$("#divHomeScreen").show();
$(document).off("backbutton", onBackButton);
}
function onBackButton()
{
hideScreen();
}
This was tested on Galaxy S3 Android 4.3 and PhoneGap 3.3.0