Android Back button on progressive web application closes application

Question

Can a pure HTML5 / Javascript (progressive) web application intercept the mobile device’s return button to prevent the application from exiting?

This question is similar to this , but I want to know if this behavior can be achieved without depending on PhoneGap / Ionic or Cordova.

Answer 1

While the Android feedback button cannot be directly connected to the context of a progressive web application, there is an api history that we can use to achieve the desired result.

, , , "" .
, , :

window.addEventListener('load', function() {
  window.history.pushState({}, '')
})

mdn:

pushState() : , ( ) () URL [...], , URL- .

"". , .

---

popstate , , ( history.pushState).

popstate , .

, :

window.addEventListener('load', function() {
  window.history.pushState({}, '')
})

window.addEventListener('popstate', function() {
  window.history.pushState({}, '')
})

, , , "", , !

---

, . , api, url , .

. popstate :

history.pushState(), [...] popstate .

, popstate , , back-button-closes-app , , , :

window.addEventListener('load', function() {
  window.history.pushState({ noBackExitsApp: true }, '')
})

window.addEventListener('popstate', function(event) {
  if (event.state && event.state.noBackExitsApp) {
    window.history.pushState({ noBackExitsApp: true }, '')
  }
})

---

, "" -, , .

Answer 2

@alecdwm, !

Android ( Chrome Samsung), -. Chrome, Firefox Edge Windows, , , Mac. IE, . iOS, "", - , Android ( Windows Mobile... awww... poor Windows Mobile) , PWA .

, window.onload init, .

, , -, , , PWA, -. , , "" ( ).

Chrome Android ( - ) , Back . - - , .

:

var backPresses = 0;
var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1;
var maxBackPresses = 2;
function handleBackButton(init) {
    if (init !== true)
        backPresses++;
    if ((!isAndroid && backPresses >= maxBackPresses) ||
    (isAndroid && backPresses >= maxBackPresses - 1)) {
        window.history.back();
    else
        window.history.pushState({}, '');
}
function setupWindowHistoryTricks() {
    handleBackButton(true);
    window.addEventListener('popstate', handleBackButton);
}

Answer 3

:

, 2 : , Android, .

(PWA). -, - Android, , -, " ".

function isStandalone () {
    return !!navigator.standalone || window.matchMedia('(display-mode: standalone)').matches;
}

// Depends on bowser but wouldn't be hard to use a
// different approach to identifying that we're running on Android
function exitsOnBack () {
    return isStandalone() && browserInfo.os.name === 'Android';
}

// Everything below has to run at page start, probably onLoad

if (exitsOnBack()) handleBackEvents();

function handleBackEvents() {
    window.history.pushState({}, '');

    window.addEventListener('popstate', () => {
        //TODO: Optionally show a "Press back again to exit" tooltip
        setTimeout(() => {
            window.history.pushState({}, '');
            //TODO: Optionally hide tooltip
        }, 2000);
    });
}