How to Handle the Android Back Button in PhoneGap (Cordova)

When using PhoneGap (aka Cordova) to build hybrid apps, you’re essentially wrapping a webview inside a native shell.

That’s why, on Android devices, pressing the back button often does what browsers do—navigates back or exits the app without asking.

But what if you want to intercept the back button and, say, ask for confirmation before quitting? Or disable it completely?

Let’s explore how to override the back button both in JavaScript and in native Android code.

Option 1: Handle Back Button in JavaScript (Recommended for Simplicity)

This is the easier, cross-platform-friendly way.

Setup

In your HTML’s <head>, add the following:

<script>
function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady() {
    document.addEventListener("backbutton", onBackKey, false);
}

function onBackKey() {
    navigator.notification.confirm(
        "Are you sure you want to exit?",
        onBackKeyResult,
        "Exit App",
        ["No", "Yes"]
    );
}

function onBackKeyResult(buttonIndex) {
    if (buttonIndex === 2) {
        navigator.app.exitApp(); // Closes the app
    }
}
</script>

Then, make sure your <body> has:

<body onload="onLoad()">

Notes:

navigator.notification.confirm() displays a native-style confirmation dialog.
It uses a callback, not a return value.
Button indices start at 1, so “No” = 1, “Yes” = 2.

With this setup, pressing the back button shows a dialog asking if the user really wants to exit.

Option 2: Handle Back Button in Native Android Code (Advanced)

If you prefer handling things natively, or need tighter integration, you can override the key behavior in Java code.

Here’s how:

Method 1: Override `onKeyDown()`

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_BACK) {
        confirmAppExit();
        return true;
    }
    return super.onKeyDown(keyCode, event);
}

private void confirmAppExit() {
    // Show AlertDialog to confirm exit
}

Problem:
This often only works after the WebView history is exhausted (i.e., last page).
In many cases, Android or the WebView may override this behavior due to internal priority.

Method 2: Use `setOnKeyListener()` on the WebView

This is more precise:

appView.setOnKeyListener(new View.OnKeyListener() {
    @Override
    public boolean onKey(View v, int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK &&
            event.getAction() == KeyEvent.ACTION_UP) {
            // Show dialog or handle as needed
            return true; // prevent default behavior
        }
        return false;
    }
});

Make sure this goes inside your onCreate() method.

Which Method Is Better?

If your UI logic is mostly inside HTML/JS, then JavaScript-side control is much simpler and more flexible.

However, if:

Your app structure is fragmented across multiple HTML files
You lack a shared <body onload> pattern
You need more robust control over native Android behavior

…then handling it natively in Java may save you some headaches.

Final Thoughts

Handling the Android back button in PhoneGap requires some setup, but it’s very doable. Just remember:

Approach	Pros	Cons
JavaScript (`backbutton` event)	Quick, cross-platform, easy to maintain	Needs consistent `<body onload>` handling
Native Android (Java)	More control, good for complex UIs	Heavier to maintain, platform-specific

For most use cases, the JavaScript approach is enough—and avoids extra builds or recompiling your app.

Now you can safely say: Back button? I control that.