Аппаратная кнопка «назад» для Android не вызывает «popstate»

Question

В мобильном приложении SPA я переопределил стандартное поведение возврата для переключения между страницами.

        // create history states
        history.pushState(-1, null); // back state
        history.pushState(0, null); // main state
        history.pushState(1, null); // forward state
        history.go(-1); // start in main state
        window.addEventListener('popstate', function (event) {
            var state = event.state;
            if (state === -1) {                    
                if (!this.goBack()) {
                    return false;
                }

                // reset state to what it should be
                history.go(-state);
            }
        }, false);

, которое прекрасно работает для всех мобильных устройств, кроме случаев, когда на некоторых устройствах Android есть кнопка возврата оборудования.(Samsung S5, BlackBerry Key 2 - это два, которые я тестирую).Событие popstate никогда не вызывается, когда нажимается аппаратная кнопка «назад», поэтому пользователь выгружается из приложения, а не возвращается на страницу.Есть ли какой-нибудь известный способ перехвата этой аппаратной кнопки возврата через Javascript?

Чтобы быть понятным, back прекрасно работает для всех устройств, кроме тех, которые имеют аппаратную кнопку возврата (не программную кнопку или пролистывание назад, как вAndroid 10), который, кажется, не вызывает событие всплывающего окна истории.

Answer 1

Я знаю два подхода, но они основаны на сторонних структурах:

1.jQuery mobile

  $(window).on("navigate", function(event, data){
      if(direction == "back") {
          // back
      } elseif(direction == "forward") {
          // forward
      }
  });

---

2.React Native

Он предлагает BackHandler для этой конкретной цели:

BackHandler.addEventListener('hardwareBackPress', function() {
    // this.onMainScreen and this.goBack are just examples, you need to use your own implementation here
    // Typically you would use the navigator here to go to the last state.

    if(!this.onMainScreen()) {
        this.goBack();
        return true;
    }
    return false;
});

---

Если для вас не проблема использовать такую ​​платформу, вам лучше пойтиэто, поскольку они вкладывают много усилий в поддержку кроссбраузера и предстоящих изменений / дополнений.Я сам могу порекомендовать jQuery mobile.