PWA Night vol.4 ~PWAのミライや活用方法をみんなで考えよう~の資料です。 https://pwanight.connpass.com/event/128434/
![こえのブログでのPWA ~ PWA編 ~ / PWA Night Vol.4](https://cdn-ak-scissors.b.st-hatena.com/image/square/8b51ea74c0c75822a6a5869aacf027990d6feb2d/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Facd98d6f5c2d4e6a95532cfaeb5b6e2e%2Fslide_0.jpg%3F12569558)
はじめに 各ブラウザの「戻る」ボタンを押すと、ブラウザのキャッシュをクリアしていても、 1) JavaScriptでリンク遷移時にローディングアイコンをページ全体に表示 2) 「戻る」ボタンを押す 3) ローディングアイコンが全体に表示されたページが読み込まれる といったことが発生する場合があります。 これはキャッシュには下記の2種類あり、ブラウザバックの場合はbfcache用の対策が必要となるためです。 - 通常のキャッシュ(ページや画像など、ブラウザの”キャッシュを削除”で削除できるもの) - bfcache(戻る/進むボタン用のキャッシュ) 確認環境 IE11 iOS7 戻るボタンで不具合が起こる理由 「戻る」ボタン用のキャッシュは、JavaScriptの処理が全て完了した状態をメモリ上に保持しています。 キャッシュとしてメモリ上の情報を読み込むことで表示を高速化しているのですが、
SafariやFirefoxを利用している人は以下のようにロールオーバー画像がそのままになってしまう症状に遭遇したことが少なからずあるかと思います。(他のサイトでも取り扱われている内容ですがあえて記事にします。) キャッシュが原因?少し違います。 多くのサイトではSafariやFirefoxではページがキャッシュされていることが原因と解説がされていますが少し違います。 ブラウザバック(戻るボタン)した時はIEやChromeもキャッシュを利用しています。しかし、上記のような現象は発生しません。何故でしょうか? 実はSafariやFirefoxは スクリプトが実行完了した状態をキャッシュ していてそれを再現しています。IEやChromeがページのみをキャッシュしているのに対し、SafariやFirefoxはスクリプトの実行結果込みでキャッシュしてしまっているんですね。 影響範囲はロールオーバー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く