Handling Ionic3 PWA back button

Question

The issue is that when clicking the back button in the phone/desktop browser the PWA will just close as there is no handling for back button by default for ionic3 PWA. I have searched everywhere for a solution that can handle back button for ionic3 PWA but I couldn't find one that currently work.

I found a solution here: Android Back Button on a Progressive Web Application closes de App

But I didn't know how to fix it in my app as I tried to throw it in my code when my app initialize and now its disabling the back button completely so now I am seeking for help.

My Code in 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 }, '')
        }
      })
    });
  }

score 2 · Accepted Answer · answered Mar 20 '19 at 11:49

Solution (Code in 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, "");
      });
    }
  }

Handling Ionic3 PWA back button

1 Answers1