ブラウザバックでのページ表示時処理

4779 ワード
bfcache ブラウザバック JavaScript JavaScript テキストリンク

ブラウザバックで動くJSの処理について質問されて、正確な情報を伝えられなかったのがきっかけで掘り下げました。

ページ表示時に動くJS処理は何があるか？

イベント 内容
DOMContentLoaded HTML解析完了時
load 全リソースの読み込み完了時(キャッシュの場合は対象外)
pageshow 全リソースの読み込み完了時(キャッシュの場合も対象)

参考：ブラウザ関連のJavaScript - Qiita
ちなみに呼ばれる順番は、①DOMContentLoaded → ②load → ③pageshowです。

各ブラウザでのブラウザバックで動くJS処理

確認方法

A.html
↓ リンク押下
B.html
↓ ブラウザバック
A.html ←このタイミングで動くページ表示時処理

キャッシュから表示された場合


Firefox、Safariは、キャッシュから復元されるとDOMContentLoaded, loadが動かない。
リクエストはキャッシュから復元されているので送らない。

キャッシュされないように指定した場合（cache-control: no-cacheをレスポンスに指定）


Firefoxは、キャッシュから復元されたかの有無でDOMContentLoaded, loadが動いたり・動かなかったりする。

（2021年06月06日時点）
Safariは、cache-control: no-cacheを指定してもキャッシュから復元してしまう。
【Safari】no-store がついていてもbfcacheが有効になる - UGA Boxxx

pageshowイベント

ブラウザバックで安定して呼ばれるのは、pageshowイベント。
pageshowイベントの引数でPageTransitionEventを受け取ります。
PageTransitionEvent.persistedのtrue or falseでキャッシュから表示されているのかを判定できます。

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    console.log('キャッシュから表示');
  } else {
    console.log('新しいページを受信して表示');
  }
});

Window: pageshow イベント - Web API | MDN
PageTransitionEvent.persisted - Web APIs | MDN

ブラウザバックに関連するキーワード

bfcache

bfcacheは、Back Forward Cacheのこと。
Firefox 1.5では、訪問したページ全体をJavaScriptの状態も含めてメモリ内にキャッシュすることで、ページ間の戻る、進む時のページロードが不要にしている。
Using Firefox 1.5 caching - Mozilla | MDN

HTTPヘッダ cache-control: no-cache

レスポンスのHTTPヘッダにcache-control: no-cacheを指定するとブラウザにキャッシュさせたくないことを指定できる。

no-store:
　レスポンスをキャッシュに保存することはできません。他のディレクティブを設定することもできますが、最近のブラウザーではレスポンスがキャッシュされることを防ぐために必要なディレクティブはこれだけです。
Cache-Control - HTTP | MDN

まとめ

現状はブラウザバック後でも、動かしたいJSの初期処理がある場合はpageshowイベントを使う方が望ましい。