Phonegap Android Back Button - close app with back button on homepage

Question

I am developing a Android app using Jquery Mobile/Phonegap. I have the following code to control the phone's back button:

document.addEventListener("backbutton", backKeyDown, true); 


function backKeyDown() { 
    // Call my back key code here.
    $.mobile.changePage("#homepage", "slideup");
}

This all works fine, but I would like the app to close when pressing the back button on the homepage only, is this possible?

Answer 1

Update: this has stopped working with a latest Phonegap update (supposedly). Feel free to offer a working solution if you know it.

---

Here's how I do it:

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);

For further information, here you can find the related documentation with a full example: http://docs.phonegap.com/en/2.0.0/cordova_events_events.md.html#backbutton

Answer 2

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() 
{
 navigator.app.exitApp();
}

Thank you spader.

Answer 3

You would need to keep track of when the homepage is being displayed. When you know you are on the homepage call:

navigator.app.exitApp();

Answer 4

If you don't want to use jQuery Mobile, change $.mobile.activePage.is('#homepage') to document.getElementById('#homepage') on @Spadar Shut answer, as on following code:

document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady(){
        document.addEventListener("backbutton", function(e){
           if(document.getElementById('#homepage')){
               e.preventDefault();
               navigator.app.exitApp();
           }
           else {
               navigator.app.backHistory()
           }
        }, false);
    }

Through this way, don't need to download Jquery Mobile gibberish only for this purpose. Also, activePage is deprecated as of JQuery mobile 1.4.0 and will be removed from 1.5.0. (Use the getActivePage() method from the pagecontainer widget instead)