2017-12-06 7 views
11

Ionic 3を使用してPWA(Tabベース)を開発しました。アンドロイドブラウザでハードウェアの戻るボタンまたはブラウザの戻るボタンを押すまでうまくいきます。ホーム画面から起動している場合は、戻るボタンを押すとアプリが終了します。アプリがアンドロイドのクロムで実行されている場合(Chromeでのみテスト済み)、ハードウェアの背面またはブラウザの背面には、以前に訪問したページではなく、最初のページが読み込まれます。どのようにイオン3 PWAでこれらのイベントを処理するには?Ionic3を使用して開発したPWAのハードウェアバックボタンを処理する方法

すべてのページに遅延ロードを使用しています。私がこれまで試したどのような

:jgw96さんのコメントhereを1として

  1. を、私はIonicPageナビゲーション自体を処理しますと思いました。しかし、それは動作していません。

  2. 使用したplatform.registerBackButtonActionですが、PWAでは使用できません。

  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, ""); 
      }); 
     } 
     } 
    } 
+0

ので、あなたは何を期待している、私は、ハードウェアの戻るボタンでブラウザやアプリで何が起こっすべきか意味ですか? – Webruster

+0

A-> B-> Cのようなページをナビゲートすると、CのバックプレスがBにポップアップします。しかし、私の場合、Aは新しいインスタンスのようにリロードしています。 –

+1

あなたの試した質問を更新してください – Webruster

答えて

3

あなたはとてもどの段階で行われるために必要なものを明確に言及しなかったので、アプリ上で、ブラウザでハードウェアの戻るボタンを操作していることに言及しています私は

app.component.ts

例大半に役立つことができ、一般化解決策を考え出しました0

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, ""); 
    }); 
+0

このコードはテスト済みですか、それともどこかで使用していますか?私はそれを試したが、動作していない。同じ問題が続く。 –

+0

@VivekSinha haventはテストしましたが、あなたが試したケースを教えてください。あなたが試みた最新のコードで質問を更新してください – Webruster

関連する問題