IWic3

Question

का उपयोग करके विकसित पीडब्लूए में हार्डवेयर बैक बटन को कैसे संभालें Ionic 3 का उपयोग करके मैंने एक पीडब्ल्यूए (टैब आधारित) विकसित किया है। यह तब तक ठीक काम कर रहा है जब तक कि हार्डवेयर बैक बटन या ब्राउजर का बैक बटन एंड्रॉइड ब्राउज़र में दबाया न जाए। यदि यह होम स्क्रीन से चल रहा है, तो हार्डवेयर वापस दबाकर ऐप बंद हो जाएगा। यदि ऐप एंड्रॉइड में क्रोम में चल रहा है (केवल क्रोम में परीक्षण किया गया है), हार्डवेयर बैक या ब्राउज़र की पीठ पीडब्लूए के पहले पृष्ठ को फिर से लोड करेगी, पहले नहीं गए पृष्ठ पर। Ionic 3 PWA में इन घटनाओं को कैसे संभालें?

मैं सभी पृष्ठों के लिए आलसी लोड का उपयोग कर रहा हूं।

मैं अब तक क्या करने की कोशिश की:

1. प्रति jgw96 की टिप्पणी here के रूप में, मैंने सोचा था कि IonicPage नेविगेशन खुद को संभाल लेंगे। लेकिन यह काम नहीं कर रहा है।

2. प्रयुक्त प्लेटफ़ॉर्म.registerBackButtonAction, लेकिन यह पीडब्ल्यूए के लिए नहीं है।

3. उत्तर में नीचे Webruster के सुझाव के अनुसार, app.component.ts में कोड का प्रयास किया। लेकिन कोई बदलाव नहीं।

पोस्टिंग कोड:

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

आपने उल्लेख किया है कि आप हार्डवेयर वापस एप्लिकेशन पर और ब्राउज़र में बटन के साथ काम कर रहे हैं ताकि आप स्पष्ट रूप से क्या क्या स्तर पर किया जाना है ताकि जरूरत का उल्लेख नहीं था मैं सामान्यीकृत समाधान जो मामलों

के अधिकांश में उपयोगी हो सकता है के साथ आया था 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, ""); 
    });