Monday, January 29, 2018

How to handle hardware back button in PWA developed using Ionic3

By Hường Hana 11:30 PM , Leave a Comment

I have developed a PWA (Tab based) using Ionic 3. It is working fine until hardware back button or browser's back button is pressed in android browser. If it is running from home screen, pressing hardware back will close app. If app is running in chrome in android (only tested in chrome), hardware back or browser's back will reload PWA's first page, not previously visited page. How to handle these events in Ionic 3 PWA?

I am using lazy load for all pages.

What I tried so far:

  1. As per jgw96's comment here, I thought IonicPage will handle navigation itself. But it is not working.

  2. Used platform.registerBackButtonAction, but it's not for PWA.

  3. As per Webruster's suggestion below in Answers, tried code in app.component.ts. But no change.

Posting code:

    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 Answers

Answers 1

you have mentioned that you are working with the hardware back button on app and in browser so you didn't mention clearly what need to be done at what stage so i came up with the generalized solution which can be useful in most of the cases

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, "");   });
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment