71
71

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

71
71
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
71
71

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?