【JavaScript】Safariでブラウザバックすると正しく動作しない【bfcache】の対策

2022年4月8日JavaScript

Safariでブラウザバックすると正しく動作しない場合の対処方法を紹介します。

Safariでブラウザバックすると正しく動作しない原因

いろいろ原因は考えられますが、ページ遷移したときにSafariだけおかしくなる場合、bfcacheが原因の可能性があります。

bfcacheとは

ブラウザには、画像などの重たいものを一時的に保存しておくキャッシュ機能があります。 サーバー側で変更しても見た目がかわらない場合、このブラウザのキャッシュが影響している場合があります。 bfcache(back-forward cache)は、Safariの独自のキャッシュの仕組みです。 bfcacheは、ブラウザをバックしてもフォワード、つまり一度訪問したページから戻って再び前に進めてもキャッシュが機能します。 このbfcacheが原因でブラウザバックしたときに思わぬ状態になっていることがあります。

bfcacheの対策

// 強制リロード
window.addEventListener('pageshow', function (event) {
  if (event.persisted) {
    // bfcache発動時の処理
    window.location.reload();
  }
});

addEventListenerのpageshowというイベントがあります。

• ブラウザの進む、戻るボタンを利用してこのページに戻ったとき
• 最初にページを読み込んだとき
• 同じウィンドウまたはタブの中で、他のページからそのページへ移動してき
たとき
• モバイルOSで凍結されたページを復元したとき

このpageshowイベントにて、ブラウザバックしたときにイベントを取得して、構成的にリロードさせます。 イベントが発生したかどうかの判定は、event.persistedで可能です。 bfcacheが有効のとき、event.persistedがtrueになるので、そのときに強制リロードさせます。