ブラウザバック問題と`pageshow`イベントによる対策メモ

症状

今回、ページ遷移前にjavascriptの処理が走ってからページ遷移する。ページ遷移したページで、ブラウザバックするとjavascriptの処理が完了された状態が表示される。
というエラーがあった。

正確な仕組み（bfcache）

• ブラウザは高速化のために、「戻る」ボタンで表示するページを完全な状態でキャッシュしている
• このキャッシュには、DOM状態、JavaScript変数、イベントリスナー、タイマーなど、すべての実行状態が含まれる
• キャッシュされた状態のJavaScriptは正常に機能するが、ページ遷移後に変わったデータなどは自動的に更新されない

対策：pageshowイベントの活用

pageshowイベントは、ページが表示されるたびに発火するため、ブラウザバック時にも対応できる。

// TypeScriptでの実装例
window.addEventListener('pageshow', (event: PageTransitionEvent) => {
  // キャッシュから復元された場合（ブラウザバック時など）
  if (event.persisted) {
    console.log('ページがキャッシュから復元されました');
  } else {
    console.log('ページが新規に読み込まれました');
  }
});

重要なポイント

1. pageshowイベントはページが表示されるたびに発火する（通常のロード時もブラウザバック時も）
2. event.persistedプロパティでキャッシュからの表示かどうかを判断できる
   • true: キャッシュからの表示（ブラウザバックなど）
   • false: 新規読み込み
3. キャッシュから復元された場合は、必要に応じてデータの更新処理を行うことができる

まとめ

ブラウザバック時は、JavaScriptの処理が鑑賞した状態がキャッシュから復元される。このときpageshowイベントを使うことで、必要に応じてデータの更新などを行うことができる。