概要
実案件でbfcacheについて色々大変だったことがあるのでメモがてら記事にしました。
bfcacheって知ってる？
bfcacheとはブラウザバックしたときに、直前のページの状態をそのまま使っちゃうもの。
bfcacheがあるおかげで、ページ遷移が爆速になって無駄なロードをさせないっていうめっちゃ利点ばっかなんだけど、今回はそれがたまたま邪魔してきた。。。
「DOM上の正確な値を表示」
問題
例えば「今の時間（サーバーの時間）」を使ったプログラムを書くとき。
DOM上にサーバーからの時間（サーバーの今の時間）を描画し、jsでその値を元にプログラムを組む場合。
ページロード時は正常な値が描画されるけど、ブラウザバッグしたときは正常な値が出ない。。。
解決策
そのページにこのjsを入れる。
window.addEventListener('beforeunload', () => {});
※最適解ではないです
最適解ではない理由はそのページにおいてbfcacheを完全に無効にするからです。
ユーザー体験的にはbfcacheを無効にするのは絶対良くない。。。
最適解
おそらく一番良いのはバックエンドがわでAPIを用意し、ブラウザバックの時に叩いて置き換えるというもの。
window.addEventListener('pageshow', (event) => {
// bfcacheかそうじゃないか
if (event.persisted) {
// API叩くコマンド
}
});
pageshowイベントの中で、bfcacheがあるかないかが内包されてるので、それを条件にAPI叩いくのがいいと思います！
まとめ
bfcacheをさせないようにするのは結構簡単にできる。
ただし、ユーザー体験は落ちてしまうのでなるべくしないほうがいい。
逆にbfcacheを有効にしたい人向けのおすすめの記事を貼っておきます。
https://techblog.yahoo.co.jp/entry/2023072430429932/
【2025年新モデル】HDMIケーブル iPhone HDMI変換ケーブ ル 2m Digital AV変換アダプタLightning ライトニング 変換アダプター ミラーリング 電源不要 設定不要 携帯の画面をテ レビに映す 同画面テレビ接続 簡単接続 テレビに映す 音声同期出力 iPhone/iPad対応 映画/オフィス/ゲームに適用 iOS9.2 to iOS18に対応 [並行輸入品]
￥1,999 (2025年4月28日 13:11 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
ALLDOCUBE iPlay 70 mini Ultra タブレット 8.8インチ Snapdragon7+Gen3 2560×1600解像度 144Hz高リフレッシュレート 20GB+256GB+1TB拡張 7300mAh PD20W デュアルスピーカーDTSサウンド 6軸ジャイロ WiFi6 BT5.4 WidevineL1 重力センサー 光センサー Androidタブレットアンドロイド
(2025年4月28日 13:11 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
