【Bubble】特定のページでブラウザバックを禁止する方法

ノーコードツールBubbleで作るアプリケーションで、特定のページのブラウザの戻るボタンをクリックしても前の画面へ戻れなくするいわゆるブラウザバック禁止の実装方法を紹介します。

実装時に、Bubbleの無料プラグイン「Toolbox」のRun javascriptアクションを使用するため、事前にインストールのご対応だけよろしくお願いいたします。

また、本メディアを運営する「EPICs株式会社」では、ノーコードを活用したアプリ・システム開発を行っております。

従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。

• 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
• 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
• リリース後の改修スピードも早い → PDCAを早く回せる

日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。

ノーコード開発サービスについて詳しく知る

EPICs株式会社の特徴

• 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
• 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
• マーケティングまで支援が可能

実装イメージ

上のサンプル動画は、ブラウザバックを禁止する前のページ＝＞ブラウザバック禁止ページの遷移イメージです。

遷移前のページの次の画面へボタンをクリックして、ブラウザバック禁止ページへ遷移し、ブラウザの戻るボタンをクリックしても前の画面へ戻れなくなる挙動が今回のゴールです。

※ブラウザの戻るボタンをクリックしたときに、一瞬前の画面がチラつくのはご愛嬌。

Bubbleでブラウザバック禁止を実装する手順

以下の手順でBubbleのWebアプリケーションにおいてブラウザバック禁止を実装します。

今回の実装ではBubbleのプラグイン「Toolbox」のRun javascriptアクションを使い、ページロード時にjavascriptの処理を実行させます。

Page is loaded イベントは、Bubbleアプリケーションでページが完全に読み込まれたときにトリガーされるイベント。このイベントを利用することで、ページ読み込み後に実行したいアクションや設定を指定することができます。

ブラウザバック禁止ページの前の画面のPage is loadedイベントでRun javascriptを設定する

ブラウザバックを禁止したいページに遷移する前の画面で、以下のJavaScriptコードを実行したいので、Bubbleの「Page is loaded」イベントのStep1で上の添付画像のようにRun javascriptアクションを選択肢、コード欄に下記をペーストします。

// ブラウザのナビゲーションが「戻る」や「進む」ボタンによるものであれば
if (window.performance.navigation.type == 2) {
    // 履歴を一つ進める（ユーザーが「戻る」ボタンを押しても、元のページに留まる）
    history.forward();
}

// ページがアンロードされるときのイベントリスナーを設定
// 何もしないが、ページがキャッシュされないようにするために必要
window.addEventListener("unload", function() {});

// ページが表示されたときのイベントリスナーを設定
window.addEventListener("pageshow", function evt(evt) {
    // ページがキャッシュから読み込まれた場合
    if (evt.persisted) {
        // ページをリロードして最新の状態に更新
        location.reload();
    }
});

１つずつコメントを入れてますが、無くても実行には影響ないのでペーストする際に消してもらって構いません。

ちなみに、window.performance.navigation.type は、Webページがどのようにして現在の状態になったかを示すプロパティです。このプロパティには以下３つのタイプがあり、上記サンプルコードではvalueが2のとき、つまりユーザーがブラウザの戻るボタンを押してページに戻ったことの判定をしています。

ブラウザバック禁止ページのPage is loadedイベントでRun javascriptを設定する

次に、ブラウザバックを禁止したいページ自体で、以下のJavaScriptコードを実行したいので、Bubbleの「Page is loaded」イベントのStep1で上の添付画像のようにRun javascriptアクションを選択肢、コード欄に下記をペーストします。

// 現在のURLを履歴スタックに新しいエントリーとして追加
// これにより、ブラウザの「戻る」ボタンを押してもURLが変わらないようにする
window.history.pushState(null, null, window.location.href);

// ブラウザの「戻る」ボタンが押されたときに発生するイベントに対するリスナーを設定
window.addEventListener('popstate', (e) => {
  // 履歴を一つ進める（ユーザーが「戻る」ボタンを押しても、元のページに留まる）
  history.go(1);
});