【1m+1m+2m 3本/黒】RAMPOW usb c ケーブル タイプc ケーブル QC3.0対応高速充電 データ転送USB2.0規格 iPhone 16/16e 充電ケーブル/iPhone 15 充電ケーブル Sony Xperia/Samsung/Asus Zenfone/Fujitsu Arrows/PS5コントローラー タイプc多機種対応 在宅勤務支援
￥999 (2025年4月26日 13:07 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
概要
実案件で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/
