History APIを使ってIonic（3以前のSPA）でブラウザの戻るボタンやAndroidバックキーを押すと前サイトに戻ってしまう件に対応する

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null
history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}

C:\src\ionic>npm install ionic -g
C:\Program Files\nodejs\ionic -> C:\Program Files\nodejs\node_modules\ionic\bin\ionic
+ ionic@5.4.6
added 240 packages from 155 contributor

C:\src\ionic>ionic start withHistoryAPI tabs --type=ionic-angular

<ion-menu [content]="content" side="left" id="mainMenu">
    <ion-header>
        <ion-toolbar>
            <ion-title>メニュー</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-content>
        <ion-list>
            <button
                menuClose
                ion-item
                *ngFor="let p of pages"
                (click)="openPage(p)"
            >
                {{p.title}}
            </button>
        </ion-list>
    </ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #content></ion-nav>

import { Component, ViewChild } from "@angular/core";
import {
    Platform,
    Nav  // 追加
} from "ionic-angular";

    (snip)

import { HomePage } from "../pages/home/home";
import { AboutPage } from "../pages/about/about";
import { ContactPage } from "../pages/contact/contact";

@Component({
    templateUrl: "app.html"
})
export class MyApp {

    @ViewChild(Nav) nav: Nav;

    // メニューに表示する内容
    pages = [
        { title: "Home", component: HomePage },
        { title: "About", component: AboutPage },
        { title: "Contact", component: ContactPage }
    ];
    //    rootPage: any = TabsPage;
    rootPage: any = HomePage;

    (snip)

    openPage(page) {
        this.nav.push(page.component);
    }
}

<!-- <ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header> -->

<ion-header>
    <ion-navbar color="dark">
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>HOME</ion-title>
    </ion-navbar>
</ion-header>

import {
    Platform,
    Nav,
    MenuController,
    App,
    AlertController
} from "ionic-angular";

export class MyApp {

    (snip)

    constructor(
          :
        // 追加
        private menu: MenuController,
        private app: App,
        private alertCtrl: AlertController
    ) {

        (snip)

        // ブラウザ戻るボタン、Androidバックキー制御
        this.setupBackButtonBehavior();
    }

    // 追加。肝の部分。
    setupBackButtonBehavior() {

        // 最初に一つブラウザ履歴を積んでおく
        history.pushState(null, null, "");

        // 「戻る」操作でブラウザ履歴が減るのをハンドリング
        window.addEventListener("popstate", () => {

            // メニューが開いていた場合はメニューを閉じる挙動にする
            if (this.menu.isOpen()) {
                this.menu.close();
                // onpopstateが発生するようにブラウザ履歴を積み直す
                history.pushState(null, null, "");
                return;
            }

            // モーダルダイアログが表示されている時はなにもしない
            let isModalShowing = window.document.querySelector(
                ".loading-wrapper, .alert-wrapper, .modal-wrapper"
            );
            if (isModalShowing) {
                // onpopstateが発生するようにブラウザ履歴を積み直す
                history.pushState(null, null, "");
                return;
            }

            // 画面遷移（Nav#push()されている状態か調査）
            let navCtrl = this.app.getActiveNav();
            if (navCtrl.canGoBack()) {
                // 画面スタック有り、popする。
                navCtrl.pop();
                // onpopstateが発生するようにブラウザ履歴を積み直す
                history.pushState(null, null, "");
            } else {
                // 画面スタック無し、アプリを終了するかユーザとインタラクション
                let exitConfirmDialog = this.alertCtrl.create({
                    title: "確認",
                    message: "アプリを終了しますか?",
                    buttons: [
                        {
                            text: "いいえ",
                            role: "cancel",
                            handler: () => {
                                // onpopstateが発生するようにブラウザ履歴を積み直す
                                history.pushState(null, null, "");
                            }
                        },
                        {
                            text: "はい",
                            handler: () => {
                                // 疑似的に積んであるブラウザ履歴を削除。
                                // 遷移元ページに戻す。PWAの場合はアプリ終了。
                                history.back();
                            }
                        }
                    ]
                });
                exitConfirmDialog.present();
            }
        });
    }

C:\src\ionic\withHistoryAPI> ionic serve --address=0.0.0.0 --port=8100