JavaScriptでブラウザバックを検知する方法

システム開発

今回は、JavaScriptでブラウザバックを検知する方法を紹介します。

業務の中で「特定のページでブラウザバックされた際に、画面の見た目を切り替える」といった要件があり、実装に少しハマったため、その内容を共有します。

ネット上にはいくつか方法が紹介されていますが、実際には動作しないケースもありました。

この記事では、正しく動作した方法を中心にまとめているので、ぜひ参考にしてみてください。

この記事を読むメリット

JavaScriptでブラウザバックを検知する方法が分かる

jsでブラウザバックの検知がうまくいかなかった方法

まずは、実際に調べて試したものの、うまく動作しなかった方法を共有します。

ネット上でもよく紹介されている方法ですが、実際に試すと動かないケースがありました。

ブラウザのアップデートやキャッシュの影響で挙動が変わることもあるため、常に最新の情報を確認することが重要だと感じました。

popstateイベント

最初に調べて出てきたのが「popstate」イベントです。

<!DOCTYPE html>
<html>
  <head>
    <title>Browser Back Test</title>
  </head>
  <body>
    <h1>Browser Back Test</h1>

    <a href="/next.html">次のページ</a>

    <script>
      history.replaceState(null, null, null);
      window.addEventListener('popstate', function (event) {
        alert('Browser back button was pressed!');
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    次のページ
  </body>
</html>

このように確認用に2つのページを作成しアラートポップアップが表示されるか確認しました。

が、表示されませんでした。

https://developer.mozilla.org/ja/docs/Web/API/Window/popstate_event

MDNには、

popstate イベントは、戻るボタンや進むボタンをクリックする（あるいは JavaScript で history.back() や history.forward() を呼び出す）など、ブラウザーの操作によって発行されます。
mdn

このように書かれていました。

どうやら、ブラウザ側で履歴を正しく検知できなくなっている可能性がありそうです。

history.replace()を試してもダメだった。。

それの解決策としてhistory.replace()を使って強制的に履歴を残す方法が紹介されておりました。

<!DOCTYPE html>
<html>
  <head>
    <title>Browser Back Test</title>
  </head>
  <body>
    <h1>Browser Back Test</h1>

    <a href="/next.html">次のページ</a>

    <script>
      history.replaceState(null, null, null);
      window.addEventListener('popstate', function (event) {
        alert('Browser back button was pressed!');
      });
    </script>
  </body>
</html>

昔の記事ではこれでうまくいったというものも結構ありましたが、ブラウザのアップデートなどで対応されなくなったと思われます。

しかし、これでも検知できませんでした。

ブラウザバックを検知できる：PerformanceNavigationTiming: type

続いて「PerformanceNavigationTiming: type」というものを使った方法です。

まず、「PerformanceNavigationTiming」がブラウザーの文書ナビゲーションイベントに関するメトリックを格納および取得するためのインターフェースになります。

その中の「type」プロパティでナビゲーションのタイプが取得できるようになっています。

そしてtypeが「“back_forward”」がブラウザの履歴になります。

以下のように使うとブラウザバックを検知できるようです。

const entries = performance.getEntriesByType('navigation');
entries.forEach((entry) => {
  if (entry.type === 'back_forward') {
    alert('ブラウザバックしたよ！');
  }
});

これでブラウザバックしてみるときちんとアラートが出ました！