yossydev Blog
rssgithub

BFCacheの動作確認とテスト方法

publishedAt:
2024/12/10
updatedAt:
2024/12/10
目次

2024年 ユウトの一人アドベントカレンダーの10日目の記事です。

Intro

今回は、BFCache（Back/Forward Cache）の動作をどのように確認できるか、具体的なチェック方法を紹介します。

BFCacheはブラウザが自動的に処理してくれる機能です。しかし、ページがBFCacheに保存されているか、またBFCacheから復元されているかを確認したい場合があります。

この記事では、ブラウザAPIやDevToolsを活用して、BFCacheの動作確認を行う手順を見ていきます。

サンプル

https://github.com/yossydev/bfcache-playground

pageshow/pagehide

bfcacheのモニタリングとして、二つのAPIを使用することができます。 それが、pageshowとpagehideです。

ページがbfcacheから復元された

まずpageshowです。コードは以下のように書けます。

window.addEventListener("pageshow", (event) => {
	if (event.persisted) {
		console.log("bfcacheによって復元されました");
	} else {
		console.log("通常のページロード");
	}
});

pageshowというイベントをリッスンしています。 このイベントは、ページ読み込みのloadイベントの直後と、ページがbfcacheから復元されるたびに発火します。

そして「ページがbfcacheから復元された」ということの判定には、event.persistedを使用します。これがtrueの時は、bfcacheから復元されたということです。

ページをbfcacheに追加した

次にpagehideイベントです。コードは以下のように書けます。

window.addEventListener("pagehide", (event) => {
	if (event.persisted) {
		console.log("bfcacheに追加されました");
	} else {
		console.log("キャッシュされませんでした");
	}
});

pagehideというイベントをリッスンしています。 このイベントは、ページがアンロードされたとき、もしくは、ページをbfcacheに保存しようとしたときに発火します。

このイベントもpageshowと同様、persistedを使用します。 trueになるときは、「bfcacheに追加された」ということがわかるようになっています。

bfcacheに追加できているかのテスト

DevToolを活用してテストできます。

DevTool →　Applicationタブ → Back/forward cacheでチェックできます。

そしてここまで来た状態で適当なページに遷移し、ブラウザバックしてみましょう。 ブラウザバック前のページでは、以下のようになっているかと思います。

そしてブラウザバック後、bfcacheへの追加が成功していると以下のようになります。

まとめ

普段自分が関わっているアプリケーションでも、BFCacheが効いているか、効いなければなんでそうなっているのかを、ぜひ見てみるのも面白いのではないでしょうか。

0