Как обращаться с задней панелью оборудования в PWA, разработанной с использованием Ionic3

Я разработал PWA (на основе Tab) с использованием Ionic 3. Он работает нормально до тех пор, пока в браузере Android не будет нажата кнопка "Назад" или кнопка "Назад назад". Если он запускается с главного экрана, нажатие на аппаратную часть закроет приложение. Если приложение работает в режиме chrome в android (только проверено на хроме), аппаратная поддержка или обратная связь браузера перезагружают первую страницу PWA, а не ранее посещенную страницу. Как обрабатывать эти события в Ionic 3 PWA?

Я использую ленивую загрузку для всех страниц.

То, что я пробовал до сих пор:

  • В соответствии с комментарием jgw96 здесь, я думал, что IonicPage будет обрабатывать навигацию. Но это не работает.

  • Используется platform.registerBackButtonAction, но это не для PWA.

  • В соответствии с предложением Webruster ниже в ответах, попробовал код в app.component.ts. Но никаких изменений.

Проводка:

    import { Component, ViewChild } from '@angular/core';
    import { Nav, Platform, AlertController, Alert, Events, App, IonicApp, MenuController } from 'ionic-angular';

    @Component({
      templateUrl: 'app.html'
    })
    export class MyApp {
      @ViewChild(Nav) nav: Nav;
      rootPage:any = 'TabsPage';
      constructor(public platform: Platform,
        public alertCtrl: AlertController, public events: Events,
          public menu: MenuController,
          private _app: App,
          private _ionicApp: IonicApp) {

        platform.ready().then(() => {
          this.configureBkBtnprocess ();
        });
      }

      configureBkBtnprocess() {
        if (window.location.protocol !== "file:") {
          window.onpopstate = (evt) => {
            if (this.menu.isOpen()) {
              this.menu.close ();
              return;
            }
    let activePortal = this._ionicApp._loadingPortal.getActive() ||
      this._ionicApp._modalPortal.getActive() ||
      this._ionicApp._toastPortal.getActive() ||
      this._ionicApp._overlayPortal.getActive();

    if (activePortal) {
      activePortal.dismiss();
      return;
    }

    if (this._app.getRootNav().canGoBack())
      this._app.getRootNav().pop();
          };

          this._app.viewDidEnter.subscribe((app) => {
            history.pushState (null, null, "");
            });
        }
      }
    }

Ответы

Ответ 1

вы упомянули, что работаете с кнопкой "Назад" на устройстве и в браузере, поэтому не указали четко, что нужно делать на какой стадии, поэтому я придумал обобщенное решение, которое может быть полезно в большинстве случаи

app.component.ts

platform.ready().then(() => {

      // your other plugins code...
      this.configureBkBtnprocess ();

    });

configureBkBtnprocess

private configureBkBtnprocess () {

    // If you are on chrome (browser)
    if (window.location.protocol !== "file:") {

      // Register browser back button action and you can perform
      // your own actions like as follows
      window.onpopstate = (evt) => {

        // Close menu if open
        if (this._menu.isOpen()) {
          this._menu.close ();
          return;
        }

        // Close any active modals or overlays
        let activePortal = this._ionicApp._loadingPortal.getActive() ||
          this._ionicApp._modalPortal.getActive() ||
          this._ionicApp._toastPortal.getActive() ||
          this._ionicApp._overlayPortal.getActive();

        if (activePortal) {
          activePortal.dismiss();
          return;
        }

        // Navigate back
        if (this._app.getRootNav().canGoBack()) 
        this._app.getRootNav().pop();

      }
      else{
        // you are in the app
      };

  // Fake browser history on each view enter
  this._app.viewDidEnter.subscribe((app) => {
    history.pushState (null, null, "");
  });