BLOGブログ

Safariブラウザバック時のキャッシュ削除

takefushi / 2021.04.16

Web制作・ホームページ制作

iOS Safariのブラウザバック時、ページ遷移前のキャッシュが残ってしまい、JS動作などもそのままになってしまう問題が発生しましたので、その対処法をご紹介します。

とてもシンプルでJavascriptで以下を追加するだけです。

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

window.onpageshow は、以下の条件ときにイベントが発生します。

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

※ 参考 MDN Web Docs - Window: pageshow イベント

event.persisted はキャッシュ有効時、window.location.reload() はブラウザリロードです。

これによって、Safari のブラウザバック時、キャッシュによって実行された JS がある場合は、ブラウザリロードをして再描画してくれます。

ぜひお試しあれ。