BFCacheの復元とページ状態

バック・フォワードキャッシュ（BFCache）は、条件を満たす文書と実行状態をメモリーに保持し、履歴移動で復元できるブラウザー機能です。HTTPキャッシュが応答データを保存するのに対し、BFCacheはページの状態を保持します。適格性はブラウザーやページの状態によって異なり、保持後もメモリー確保のため破棄されることがあります。復元や一定の高速化を保証する機能とは考えないでください。

風景を描いたページカード、重なったページの束、再び現れたページを示す比喩的なイラスト

ページを保管して戻す比喩です。hidden・frozen状態やpagehide・pageshowイベントを描いたものではありません。

実際の復元を示す信号

戻る・進む操作の後、pageshowイベントのpersisted === trueで文書が実際に復元されたと確認できます。pagehide.persisted === trueが示すのはブラウザーがページを保持しようとする意図であり、その後の復元を約束するものではありません。Chromiumのfreeze・resumeイベントはバックグラウンドタブの凍結時にも発生するため、BFCacheの測定ではpageshow.persistedを使います。

復帰後に更新する情報

たとえば購入ページを開いたまま別画面でカートを変更し、その後戻る状況を考えます。まずpageshow.persistedで実際の復元か通常ロードかを判別します。復元された場合は価格や在庫などサーバー側で変わり得る情報を確認し、凍結中に切断された接続を重複させずに再接続します。未保存の入力はアプリの方針に沿って復元するか、利用者に確認します。これは説明用の仮想例で、特定のアプリで実行した結果ではありません。

適格性を調べる手順

  1. 対象ブラウザーの診断機能で実際の戻る・進む経路を試し、復元の有無と報告された除外理由を記録します。
  2. 必須の後処理をunloadに依存させず、必要ならpagehideを使います。beforeunloadは未保存の変更を警告する必要がある間だけ登録します。
  3. WebSocket、WebRTC、IndexedDBを、全ブラウザーに共通する除外項目とみなさず、実際のエンジンとバージョンで報告された理由を確認します。離脱時に接続を閉じるならpagehideで処理し、実際に復元された後のpageshowで再接続します。
  4. BFCacheを避ける目的でCache-Control: no-storeを使いません。復元後に機密情報や更新され得る情報を再確認または消去します。

報告ではブラウザー、バージョン、経路ごとのpageshow.persistedによる実際の復元回数と復帰時間を記録し、通常の初回ロード指標と分けます。一つの経路での成功は、サイト全体の復元率を示しません。

参考資料