I have a Cordova app made with ReactJS. When on the homepage I would like the back button to suspend the app (default behavior) and when not on the home page I would like to have my custom implementation of history to take over. In the deviceready event handler I added
document.addEventListener( 'backbutton', onBackButtonKeyDown.bind(this), false);
The implementation of onBackButtonKeyDown looks like this (removed some stuff to make the code clearer):
function onBackButtonKeyDown(e) {
if(!SomeStore.isMainMenuClosed) {
e.preventDefault();
historyButtonActions.raiseBackButtonClickedEvent();
}
};
I also tried adding an else block with return false;. In all cases the default behavior is not triggered. While Googling I saw some suggestions to use navigator.app.exitApp();, but I don't want to exit the app. I want the Home intent to take over and for the app to suspend like the default functionality works.
I ended up side stepping the issue by adding and removing the custom handler from the backbutton event as needed. Once the handler is removed, the default behaviour returns.
Related
I'm looking for change action for backbutton, actually I'm using events to catch backbutton calls and using navigator.app.exitApp(); to close app (in really pause app), but I need backbutton call action like home button.
Why? Well, I using cordova-plugin-background-mode, and this works only when app send to background (if using navigator.app.appExit() app is paused), so I need leave app every in background.
Is possible change action of backbutton to works like home?
I want use in iPhone and Android systems
you can use the plugin
https://github.com/amitsinha559/cordova-plugin-back-as-home
and
https://github.com/tomloprod/cordova-plugin-appminimize
after adding the plugin you can minimize the app when ever you want
like on back button click
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown() {
// Handle the back button
window.plugins.appMinimize.minimize();
}
Whichever suits you. Unfortunately they both are for android. you need to create plugin manually for iPhone.
I tried adding function to override current back button behaviour, which is exactly the same as pressing back button (left arrow) in browser. This often goes to the view that is forward instead of going back. I understand that this is how WebView would handle back button action if it is not override.
I was surprised that Android back button doesn't work the same as ion-nav-view standard back button, so I found the code that is responsible in ionic.bundle.js:
// Triggered when devices with a hardware back button (Android) is clicked by the user
// This is a Cordova/Phonegap platform specifc method
function onHardwareBackButton(e) {
console.log('check'); //this never fires
var backView = $ionicHistory.backView();
if (backView) {
// there is a back view, go to it
backView.go();
} else {
// there is no back view, so close the app instead
ionic.Platform.exitApp();
}
e.preventDefault();
return false;
}
console.log('check2'); //this fires
$ionicPlatform.registerBackButtonAction(
onHardwareBackButton,
IONIC_BACK_PRIORITY.view
);
I tested it on Galaxy S5.
Any hints how to make this work?
Why are you not using : $ionicHistory.goBack() instead of backView.go(); ?
From doc goBack is the way to navigate through history
I think you are adding the the back view as a new view upon the stack by calling
backView.go();
you should, instead call
$ionicHistory.goBack();
Is it possible you're using Ionic View to run the app? If so, that's been one of the many different-than-native issues that I've run into while using Ionic View. I couldn't get the back button behavior to work as intended within Ionic View, among other things.
I've since switched to testing my app with others using Google Play Alpha/Beta Testing. That will get the app running on every tester's device the way it will actually appear.
Even though I had no errors like:
cordova is undefined
I added the following to my index.html and it started working
<script src="cordova.js"></script>
document.addEventListener ('backbutton', function (evt) {
if (x) return // Proceed normally.
// Do stuff.
})
Adding the back button event listener overrides all the default behavior. (HTML5 History pop listener)
But, that's not what I want. I want the back button to potentially not fire (i.e.: something like evt.preventDefault), allowing the HTML5 History pop event to run. HELP!
it will override the default one. as in the documentation there is no need to prevent the default behavior.
But since in Cordova, "Default behavior" Is just exiting the app you can make it do the same by:
if (x) navigator.app.exitApp();
I want to make something happen when back button is pressed so I put this code in my app's .js file:
function wlCommonInit(){
// Common initialization code goes here
WL.App.overrideBackButton(backFunc);
}
function backFunc(){
alert('You will back to previous page');
}
After building and deploying the application and running it in a device, the alert is shown when I press the Back button.
If I now exit the app by pressing on the Home button and kill the app's process, and then open the app again and press the Back button - it doesn't work.
Place your code INSIDE wlCommonInit(). I suggest to do so in this manner:
function wlCommonInit() {
WL.App.overrideBackButton(backFunc);
}
function backFunc() {
alert('You will back to previous page');
}
Edit: Question updated with the above code snippet and new information based on the comments. Scenario works fine. See comments.
I couldn't find it in the docs, is there a module, or some other way to catch events from the android back button? If not it would be a nice and probably quick module to add.
No: the back button just pops you one item back in the history stack. You do something like change the hash fragment to track navigation through your app (frameworks like Backbone.js can do this for you automatically).
The reason we've taken that approach is there's no hardware back button on iOS so we're wary of setting people up to rely on it in their app, only for the app to be fundamentally broken on that platform: we're aiming for consistency of completeness at the moment.
Update: due to popular demand, we've added support for controlling the back button behaviour on Android: http://docs.trigger.io/en/v1.4/modules/event.html#backpressed-addlistener - note backPressed.preventDefault too.
The event handler is passed a function which, when invoked, closes the app, so you could have code like:
forge.event.backPressed.addListener(function (close) {
if (atHomeScreen) {
close();
}
}