メインコンテンツまでスキップ
バージョン: v8

ハードウェアの戻るボタン

ハードウェアの戻るボタンは、ほとんどの Android デバイスにあります。ネイティブアプリケーションでは、これを使って、モデルを閉じたり、前のビューに移動したり、アプリを終了したりすることができる。既定値では、 戻るボタンを押すと、現在のビューがナビゲーションスタックからポップされ、前のビューが表示されます。ナビゲーションスタックに前のビューが存在しない場合は、何も起こりません。このガイドでは、ハードウェアの戻るボタンの動作をカスタマイズする方法について説明します。

注記

ハードウェアの 「戻る」 ボタンとは Android デバイスの物理的な 「戻る」 ボタンのことであり、ブラウザの 「戻る」 ボタンや ion-back-button ボタンと混同しないでください。このガイドの情報は、Android デバイスにのみ適用されます。

概要​

Ionic Framework は、サポートされている環境でユーザーがハードウェアの戻るボタンを押すと、ionBackButtonイベントを発行します。

ionBackButton イベントを監視して、起動するハンドラを登録できます。このハンドラは、アプリケーションの終了や確認ダイアログのオープンなどのアクションを実行できます。各ハンドラには優先順位を割り当てる必要があります。既定では、ハードウェアの戻るボタンを押すごとに 1 つのハンドラだけが起動されます。優先順位の値は、どのコールバックを呼び出すかを決定するために使用されます。これが便利なのは、モーダルを開いている場合、ハードウェアの戻るボタンを押したときにモーダルが閉じられたり、アプリが後方に移動したりしないようにしたいからです。一度に 1 つのハンドラだけを実行すると、モーダルを閉じることができますが、戻るにはハードウェアの戻るボタンをもう一度押す必要があります。

複数のハンドラを起動したい場合があります。各ハンドラのコールバックは、フレームワークに次のハンドラを呼び出すように指示するために使用できるパラメーターとして関数を渡します。

サポート​

以下の表は、環境によってハードウェアの戻るボタンのサポートがどのように異なるかを示しています。

EnvironmentStatus
Capacitor@capacitor/appパッケージがインストールされている場合のみサポートされます。
Cordovaサポートされています
BrowserexperimentalCloseWatcherがtrueで、プラットフォームが Close Watcher API をサポートしている場合のみサポートされます。
PWAexperimentalCloseWatcherがtrueで、プラットフォームが Close Watcher API をサポートしている場合のみサポートされます。

ブラウザまたは PWA でのハードウェアの戻るボタン​

Ionic は、IonicConfig でexperimentalCloseWatcher: trueを設定することで、ブラウザまたは PWA でハードウェアの戻るボタンを処理する実験的なサポートを提供します。この機能が有効になっている場合、Ionic はClose Watcher APIを使用して、すべての閉じるリクエストをionBackButtonイベントを通じて渡します。これには、ナビゲーションのためにハードウェアの戻るボタンを押すことや、モーダルを閉じるために Escape キーを押すことが含まれます。

Chrome はChrome 120から Close Watcher をサポートしています。

ハードウェアバックボタンを完全にサポートするには、Capacitor または Cordova の使用をお勧めします。

注記

The ionBackButton event will not be emitted when running an app in a browser or as a PWA if Close Watcher is unsupported or experimentalCloseWatcher is false.

Basic Usage​

document.addEventListener('ionBackButton', (event) => {
  event.detail.register(10, () => {
    console.log('Handler was called!');
  });
});

この例では、ハードウェアバックボタンが押されたときに呼び出されるハンドラを登録しています。優先度を 10 に設定し、次のハンドラを呼び出すことをフレームワークに指定していません。その結果、優先順位が 10 未満のハンドラは呼び出されません。優先度が 10 より大きいハンドラが最初に呼び出されます。

同じ優先順位値を持つハンドラが存在する場合は、最後に登録されたハンドラが呼び出されます。詳細は、 Handlers with the Same Priorities を参照してください。

複数ハンドラの呼び出し​

各ハードウェアバックボタンコールバックには、 processNextHandler パラメータがあります。この関数を呼び出すと、ハードウェアバックボタンハンドラの呼び出しを続行できます。

document.addEventListener('ionBackButton', (event) => {
  event.detail.register(5, () => {
    console.log('Another handler was called!');
  });

  event.detail.register(10, (processNextHandler) => {
    console.log('Handler was called!');

    processNextHandler();
  });
});

この例は、次のハンドラを起動するように Ionic Framework に指示する方法を示しています。すべてのコールバックには、パラメータとして processNextHandler 関数が用意されています。これをコールすると、次のハンドラ (存在する場合) が起動されます。

同じ優先順位のハンドラ​

内部的には、Ionic Framework はハードウェアのバックボタンハンドラを管理するためにプライオリティキューに似たものを使用します。優先順位の値が最大のハンドラが最初に呼び出されます。同じ優先順位のハンドラが複数存在する場合、このキューに追加された同じ優先順位の last handler が、最初に呼び出されるハンドラになります。

document.addEventListener('ionBackButton', (event) => {
  // Handler A
  event.detail.register(10, (processNextHandler) => {
    console.log('Handler A was called!');

    processNextHandler();
  });

  // Handler B
  event.detail.register(10, (processNextHandler) => {
    console.log('Handler B was called!');

    processNextHandler();
  });
});

上の例では、ハンドラ A と B の両方の優先度は 10 です。ハンドラ B は最後に登録されているため、Ionic Framework はハンドラ A を呼び出す前にハンドラ B を呼び出します。

アプリの終了​

場合によっては、ハードウェアの戻るボタンを押したときにアプリケーションを終了することをお勧めします。これは、Capacitor/Cordova が提供するメソッドと組み合わせた ionBackButton イベントを使用することで実現できます。

import { BackButtonEvent } from '@ionic/core';
import { App } from '@capacitor/app';

...

const routerEl = document.querySelector('ion-router');
document.addEventListener('ionBackButton', (event: BackButtonEvent) => {
  event.detail.register(-1, () => {
    const path = window.location.pathname;
    if (path === routerEl.root) {
      App.exitApp();
    }
  });
});

この例は、ユーザがハードウェアの戻るボタンを押したときにアプリケーションが終了し、ナビゲーションスタックに何も残っていないことを示しています。アプリを終了する前に確認ダイアログを表示することも可能です。

アプリケーションを終了する前に、ユーザーがルート・ページにあるかどうかを確認することをお勧めします。開発者は、Ionic Angular の IonRouterOutlet でcanGoBack 、 Ionic React および Ionic Vue の IonRouter で canGoBack メソッドを使用できます。

内部フレームワークハンドラ​

次の表は、Ionic Framework が使用するすべての内部ハードウェアバックボタンイベントハンドラの一覧です。 Propagates 列は、その特定のハンドラが Ionic Framework に次の戻るボタンハンドラを呼び出すように指示するかどうかを示します。

HandlerPriorityPropagatesDescription
Overlays100NoApplies to overlay components ion-action-sheet, ion-alert, ion-loading, ion-modal, ion-popover, and ion-picker.
Menu99NoApplies to ion-menu.
Navigation0YesApplies to routing navigation (i.e. Angular Routing).

Contents

このページを編集