【Typescript】ブラウザバックの落とし穴

概要

実案件で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/