Jak radzić sobie ze sprzętowym przyciskiem Back w PWA opracowanym przy użyciu Ionic3

Question

Opracowałem PWA (oparty na Tab) przy użyciu Ionic 3. Działa to dobrze, dopóki przycisk powrotu sprzętu lub przycisk wstecz przeglądarki nie zostanie naciśnięty w przeglądarce Androida. Jeśli działa na ekranie głównym, naciśnięcie przycisku sprzętowego spowoduje zamknięcie aplikacji. Jeśli aplikacja działa w chrome na Androidzie (tylko testowane w chrome), sprzężenie zwrotne sprzętu lub przeglądarka spowrotem załaduje pierwszą stronę PWA, a nie poprzednio odwiedzaną. Jak radzić sobie z tymi zdarzeniami w Ionic 3 PWA?

Używam leniwe obciążenie dla wszystkich stron.

Co próbowałem dotąd:

1. zgodnie jgw96 w komentarzu here, myślałem IonicPage będzie obsługiwać nawigację siebie. Ale to nie działa.

2. Zastosowana platform.registerBackButtonAction, ale nie jest przeznaczona dla PWA.

3. Zgodnie z sugestią Webruster poniżej w odpowiedziach, wypróbowany kod w app.component.ts. Ale bez zmian. Kod

publikacji:

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, ""); 
      }); 
     } 
     } 
    } 

Answer 1

już wspomniano, że podczas pracy ze sprzętem przycisku wstecz na aplikacji, a w przeglądarce, dzięki czemu nie wspomina wyraźnie, co należy zrobić na jakim etapie tak wpadłem uogólnionego rozwiązania, które mogą być przydatne w większości przypadków

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, ""); 
    });