0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Ionic4で modal 系をAndroid Hardware Back Button で閉じる方法

Last updated at Posted at 2019-02-20

ionicを使って、Androidアプリを開発していて、Android Hardware Back Buttonのハンドリングに苦労した為、知見をまとめて置きます。
ionic4のion-modalには、単純に使おうとするとURLが振られておらず、バックボタンが押された時にアプリが閉じていまいます。

今回は、cordova等を使わない純粋なWeb APIで閉じるようにします。
Web APIのHistoryを使って、動作を再現する必要があります。

// 追加 自分自身のページをストックする。
history.pushState(null, null, '');
// 閉じる
history.back();

ion-modalように実装すると以下のようになり、正しく閉じることが可能です。


constructor() {
  // Fake history の追加 (Android hardware back 対策)
  window.addEventListener('ionModalDidPresent', () => {
    history.pushState(null, null, '');
  });
  // 画面操作で閉じられた場合は消えないので事前 にFake history を消す
  window.addEventListener('ionModalWillDismiss', () => {
    // Fake history は null で判定可能
    if (history.state === null) {
      history.back();
    }
  });
}

モーダル以外のコンポーネントででも判定可能です。
実装ベースでは、Did、WillのタイミングとFake historyの値に気をつけて実装してあげましょう。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?