1. Qiita
  2. 投稿
  3. HTML

iOS safari の戻る/進むボタンと bfcache について

  • 39
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

bfcacheとは

bfcache とは、ざっくり言うとブラウザの戻るボタンや進むボタンを押して画面遷移した時に、onload イベントが発火せず、JavaScript の状態が保存されたキャッシュが呼ばれて表示されることです。
発生条件は色々あるようなので、戻る/進むボタンを使うと必ず起こる現象でもないようです。
bfcache に関して詳しくは下記あたりに目を通したうえで検索してください。

Using Firefox 1.5 caching
Working with BFCache
bfcache について覚えて帰ってもらいます。(転載)

bfcache を無効にする

bfcache を無効にする方法を検索すると、下記のように onunload イベントにフックするだけで回避できるという記述が出てきます。

window.onunload = function() {};

が、iOS safari ではこの方法で回避できません。

iOS safari では下記のように pageshow イベントと、初回ロード時に false がセットされる persisted という真偽値プロパティを使用して、bfcache が使用された場合にリロードなどの処理を入れて回避することになります。

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

ただこの方法だと、bfcache が使用された場合に必ずリロードされてしまうので、実際には

  • リロード以外の処理でなんとかする
  • 必要な時だけリロードさせる

などにしたほうが bfcache による体感速度の向上も保ったまま対策ができるので良いかと思います。

参考

javascript - Mobile Safari back button - Stack Overflow