Cordova android backbutton confirmation message

Question

I am working with Cordova based vue.js related app with Monaca and onsen.ui. I need to work on the Android Back button so that it shows me a confirmation message whenever a user presses the back button of the phone. it must show two option 'Yes' and 'No'. If user presses 'yes' then the user will leave the app and otherwise will stay in the app. As I am new with Vue.js, Plese help me to find a solution for implementing it in vue.js. I have tried other solution available in StackOverflow, but nothing seems to be working. I will be grateful for your help.

mounted(){
            document.addEventListener('backbutton', this.onBackKeyDown, false);

        },
methods{
 onBackKeyDown:  function  (e) {
                    e.preventDefault();
                    alert('Back Button is Pressed!');
                    navigator.notification.confirm("Are you sure you want to exit ?",this.onConfirm(), "Confirmation", "Yes,No");
                    // Prompt the user with the choice
                },
                onConfirm: function (button) {
                    if (button === 2) {
                        return;
                    } else {
                        navigator.app.exitApp();
                    }
                },
}

Please post what you have already tried. Without showing your current efforts that we can help to fix, you're basically saying "write my code" and that's not what SO is for. — Reinstate Monica Cellio, Mar 27 '18 at 10:17
The problem is you are trying to attach the backbutton event before deviceready event is fired. — Naresh Kumar, Mar 27 '18 at 10:41

score 0 · Answer 1 · answered Mar 27 '18 at 10:30

It doesn't matter which js you are using. if you want to implement the above requirement you need to install the following plugin.

cordova plugin add cordova-plugin-dialogs

and sample code as follows

document.addEventListener("deviceready", onDeviceReady, false);
 function onDeviceReady(){
         document.addEventListener("backbutton", function(e){
        navigator.notification.confirm("Are you sure you want to exit the application?",fnLogout,"Warning","Ok,Cancel"); // u can change the button names in the place of ok,cancel.
    }, false); 
}

function fnLogout(button) {
    if(button == 1) {
        navigator.app.exitApp(); //exit from the if presses "ok"
    } else {
        return; //No action if presses "cancel"
    }                     
 }

I have added your solution in my code and installed the plugin but in the browser when I press escape button it only goes back without showing any message. Please help. — Tasfia Sharmin, Mar 27 '18 at 17:02

Cordova android backbutton confirmation message

1 Answers1