Question

问题在于，当单击电话/桌面浏览器中的后退按钮时，由于对ionic3 PWA默认没有后退按钮的处理，因此PWA只会关闭。我到处搜索了一种可以处理ionic3 PWA后退按钮的解决方案，但找不到当前可以使用的解决方案。

我在这里找到了解决方案： Android Back Button on a Progressive Web Application closes de App

但是我不知道如何在应用程序中修复它，因为在我的应用程序初始化时试图将其放入代码中，现在它完全禁用了后退按钮，因此现在我正在寻求帮助。

app.components.ts中的我的代码

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      //Back button handling
      window.addEventListener('load', function() {
        window.history.pushState({}, '')
      })

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

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

      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 1

解决方案（app.components.ts中的代码）

    import { Platform, App, IonicApp, MenuController } from 'ionic-angular';
    import { StatusBar } from '@ionic-native/status-bar';
    import { SplashScreen } from '@ionic-native/splash-screen';

    constructor(
        platform: Platform, 
        statusBar: StatusBar, 
        splashScreen: SplashScreen,
        private app:App,
        private ionicApp: IonicApp,
        private menu: MenuController
    ) {

    }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.setupBackButtonBehavior();
    });
  }

    setupBackButtonBehavior () {
    // If on web version (browser)
    if (window.location.protocol !== "file:") {
      // Register browser back button action(s)
      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();
      };
      // Fake browser history on each view enter
      this.app.viewDidEnter.subscribe((app) => {
        history.pushState (null, null, "");
      });
    }
  }

处理Ionic3 PWA后退按钮

1 个答案: