Javascriptにはブラウザの戻るボタンをクリック、いわゆるブラウザバックで前ページに戻ってきた時に発火するイベントは存在しません。

そのため、今まで様々な方法でイベントの代替案が考案されてきましたが、今の所この方法が一番ベストと考え、実務でも使用しています。

ブラウザで「戻る」検知イベントで何をしたいのか

そもそも「戻る」を検知して一体何をしたいのか、具体的な例を上げてみました。

二重送信防止フォームでも戻って再送信できるようにしたい

これが一番多いです。

入力画面などの送信ボタンを複数回クリックして二重送信を防ぐために、送信ボタンを一度クリックすると送信ボタンを非活性（disabled）にしたり、画面全体にローディングをオーバーレイするなどして操作ができない状態にすることがあります。

もちろん送信後は、次のページに遷移しますが、ユーザーによっては、内容を修正しようとブラウザバックする可能性があります。

この時、送信ボタンが非活性化（disabled）や、ローディングがオーバーレイした状態のままキャッシュされてしまっているので、再送信しようにも送信することができません。

なので、ブラウザバックした時にこれらを解除したい。

これらの現象は主にSafariで発生する現象です。

この現象はChromeでは起こりません。キャッシュするタイミングが異なるからだと思いますが。

ブラウザバックで発火するイベントはない

前述した通り、ブラウザの戻るボタンをクリックして遷移してきたことを検知し、発火するイベントはありません。

ですが、popstateイベントを使用した代替案があります。

history.replaceState(null, document.getElementsByTagName('title')[0].innerHTML, null);
window.addEventListener('popstate', function(e) {
  alert('ブラウザバックを検知しました。');
});

popstateイベントは履歴が変更されることで発火します。

アクティブな履歴エントリが変更される度にウィンドウへと popstate イベントが発行されます。

https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history#popstate_%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88

前ページに戻るとhistory.replaceStateが実行されて履歴に変化を与えることで、強制的にpopstateイベントを発火させていています。

履歴上のタイトルを同じタイトルで書き換えているだけで、履歴に変化はないです。

ブラウザバックで前のページに戻ったらキャッシュを表示せずにリロードさせたい場合は、以下のように記述します。

history.replaceState(null, document.getElementsByTagName('title')[0].innerHTML, null);
window.addEventListener('popstate', function(e) {
  window.location.reload();
});

最近も某チケットサイトの開発時に使用しました。

誰かの参考になれば、と。