Обработка кнопки возврата Ionic3 PWA - PullRequest
Новая
       11

Обработка кнопки возврата Ionic3 PWA

0 голосов
/ 18 марта 2019

Проблема заключается в том, что при нажатии кнопки «Назад» в браузере телефона / рабочего стола PWA просто закроется, поскольку для кнопки «назад» по умолчанию для ionic3 PWA отсутствует обработка кнопки «Назад».Я всюду искал решение, которое могло бы обрабатывать кнопку возврата для ionic3 PWA, но я не смог найти решение, которое работает в данный момент.

Я нашел решение здесь: Кнопка возврата Android в прогрессивном веб-приложении закрывается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 }, '')
        }
      })
    });
  }

1 Ответ

0 голосов
/ 20 марта 2019

Решение (Код в 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, "");
      });
    }
  }
...