[javascript][bfcache]safariでブラウザバックの対応

JavaScript

safariで戻るボタンを押したら、bfcache(Back Forward Cache)が効いて、javascriptのloadingが消えない現象が起きていたので、対応してみました。

PR

原因

chromeでは、特には問題が起きていなかったwebシステムが、safariで開いて戻るボタンを押すと…
javascriptの処理が残った状態になって、ローディングが回り続けてました🤮(クルクルして読み込み待ちするやつです)

bfcache(back forward cache)について

調べてみると、safariではbfcacheが効いているので、戻るを押した場合にchromeと挙動が変わってくるとのこと。

対応策

window.onponbeforeunload / window.onunload / window.onpageshowを呼んであげていろいろ試しましたが、
最終的に、onpageshowにキャッシュが効いていたらページを再ロードする処理を書きました。

javascriptのイベントについて

今回使用した3つのイベントは下記の効果があります。

・onbeforeunload
ページを閉じる直前に呼ばれて、書いた処理が実行されます。
unloadの前に呼ばれます。

beforeunload (MDN link)

・onunload
ページを閉じる時に呼ばれて、書いた処理が実行されます。
beforeunloadの後に呼ばれます。

unload(MDN link)

・onpageshow
ページが開かれたり、更新されたりするたびに呼ばれます。

onpageshow(MDN link)

javascriptでbfcache対応する

共通で呼ばれる箇所に下記のように書きます。
onpageshowでページが開かれたり、更新したり、戻ってきたりした時に呼ばれ、bfcache(event.persistedで判定)が効いてたら画面をリロードします。

window.onpageshow = function(event) {
  if (event.persisted) {
    window.location.reload();
  }
};

typescriptでbfcache対応する

typescriptでwindowのイベントは下記のように書けるようでした。

window.onpageshow = (event) => {
  if (event.persisted) {
    window.location.reload();
  }
};

おわりに

ブラウザバックで戻る場合にも再読み込みを走らせて、初期表示に戻すという対応なので、
再読み込みによる意図しない挙動には注意したいところです☹️

JavaScriptプログラミング
独学に限界を感じたら、オンラインのプログラミングスクールへ...
  • Code ViIlage
      挫折させない本気のプログラミングスクール。学習継続率93.3%・卒業生800名以上。
  • DMM WEBCAMP
      働きながら自分のペース学んでエンジニア転職。無料カウンセリング満足度99%!
  • TECH CAMP
      無料カウンセリング満足度95%!本業に活かせる。キャリアアップにつながる。
  • TechAcademy
      現役エンジニアから学べるオンラインに特化したプログラミングスクール。
  • テックパートナーズカレッジ
      WEBシステム開発会社のノウハウが学べるオンラインスクール。14日無料体験有り!
  • \ PHP・Laravelに特化したオンラインスクール /
    yasuakiをフォローする
    codelikeなブログ

    コメント

    タイトルとURLをコピーしました