bfcache の使用がブロックされたナビゲーションと、その理由を確認します。
PerformanceNavigationTiming
クラスに追加された notRestoredReasons
プロパティは、ドキュメント内のフレームがナビゲーション時に bfcache の使用をブロックされたかどうか、およびその理由に関する情報をレポートします。デベロッパーはこの情報を使用して、bfcache に対応するよう更新が必要なページを特定し、サイトのパフォーマンスを向上させることができます。
現在のステータス
ステップ | ステータス |
---|---|
1. 説明を作成 | 完了 |
2. 仕様の最初のドラフトを作成する | 未対応 |
3.フィードバックを収集し、設計を反復する | 作成中 |
4. オリジン トライアル | 開始済み |
5. リリース | 未対応 |
bfcache notRestoredReasons
API を試す
バージョン 109 以降では、bfcache notRestoredReasons
API を Chromium のオリジン トライアルとして利用できます。この機能のリリース スケジュールの最新情報については、ChromeStatus.com の機能ページをご覧ください(バージョンのリリース日については、Chrome ロードマップをご覧ください)。
オリジン トライアルに登録してテストで使用すると、bfcache notRestoredReasons
API を試すことができます。登録後にトークンを使用する方法については、オリジン トライアルに参加するをご覧ください。
コンセプトと使用方法
最新のブラウザには、バックフォワード キャッシュ(bfcache)と呼ばれる履歴ナビゲーションの最適化機能があります。これにより、ユーザーが以前にアクセスしたページに戻ったときに、すぐに読み込むことができます。bfcache でページの bfcache への侵入をブロックしたり、ページを強制排除したりするには、さまざまな理由が考えられます。たとえば、仕様で求められる場合や、ブラウザの実装に固有の場合もあります。
以前は、Chrome デベロッパー ツールでテストが行われていましたが、ページで bfcache の使用がブロックされた理由をデベロッパーが見つける方法はありませんでした。フィールド内でモニタリングを有効にするために、PerformanceNavigationTiming
クラスが拡張され、notRestoredReasons
プロパティが含まれるようになりました。これにより、ドキュメント内のすべてのフレームに関する関連情報を含むオブジェクトが返されます。
- フレーム
id
やname
など、HTML 内での識別に役立つ詳細情報。 - bfcache の使用がブロックされたかどうか。
bfcache の使用がブロックされた理由。
これにより、デベロッパーはページを bfcache に対応させるための対策を講じ、サイトのパフォーマンスを向上させることができます。
例
PerformanceNavigationTiming
インスタンスは、Performance.getEntriesByType()
や PerformanceObserver
などの機能から取得できます。
たとえば、次の関数を呼び出して、パフォーマンス タイムラインに現在存在するすべての PerformanceNavigationTiming
オブジェクトを返し、notRestoredReasons
をログに記録できます。
function returnNRR() {
const navEntries = performance.getEntriesByType("navigation");
for (let i = 0; i < navEntries.length; i++) {
console.log(`Navigation entry ${i}`);
let navEntry = navEntries[i];
console.log(navEntry.notRestoredReasons);
}
}
履歴ナビゲーションの場合、PerformanceNavigationTiming.notRestoredReasons
プロパティは次の構造を持つオブジェクトを返します。これは、トップレベル フレームのブロック状態を表します。
{
blocked: true,
children: [],
id: "",
name: "",
reasons: [ "Internal Error", "Unload handler" ],
src: "",
url: "a.com"
}
プロパティは次のとおりです。
blocked
- 移動されたページでの bfcache の使用をブロックするかどうか(
true
)を示すブール値(false
)。 children
- トップレベルのフレームに埋め込まれたフレームのブロック状態を表すオブジェクトの配列。各オブジェクトは親オブジェクトと同じ構造です。このようにして、任意の数の埋め込みフレームをオブジェクト内で再帰的に表現できます。フレームに子がない場合、配列は空になります。
id
- フレームの
id
属性値を表す文字列(例:<iframe id="foo" src="...">
)。フレームにid
がない場合、値は空の文字列になります。 name
- フレームの
name
属性値を表す文字列(例:<iframe name="bar" src="...">
)。フレームにname
がない場合、値は空の文字列になります。 reasons
- 移動先のページで bfcache の使用がブロックされた理由を表す文字列の配列。ブロックが発生する理由はさまざまです。詳しくは、以下のブロックの理由をご覧ください。
src
- フレームのソースへのパスを表す文字列(例:
<iframe src="b.html">
)。フレームにsrc
がない場合、値は空の文字列になります。 url
- ナビゲーションしたページの URL を表す文字列。
履歴ナビゲーションを表していない PerformanceNavigationTiming
オブジェクトの場合、notRestoredReasons
プロパティは null
を返します。これは、bfcache が特定のナビゲーションに関連していないかどうかを判断するのに役立ちます。一方、notRestoredReasons
がサポートされていない場合は、undefined
を返します。
同一オリジン フレームでの bfcache のブロックを報告する
ページに同一オリジン フレームが埋め込まれている場合、返される notRestoredReasons
値には、各埋め込みフレームのブロック状態を表す children
プロパティ内にオブジェクトが含まれます。
次に例を示します。
{
blocked: false,
children: [
{ url: "a.com", src: "b.a.com", id: "b", name: "b", blocked: false, reasons: [], children: [] },
{ url: "a.com", src: "c.a.com", id: "c", name: "c", blocked: true, reasons: [ "BroadcastChannel" ], children: [] },
{ url: "a.com", src: "d.a.com", id: "d", name: "d", blocked: false, reasons: [], children: [] }
],
id: "",
name: "",
reasons: [],
src: "",
url:"a.com"
}
クロスオリジン フレームでの bfcache のブロックを報告する
ページにクロスオリジン フレームが埋め込まれている場合、クロスオリジン情報の漏洩を避けるため、Google はそれらのフレームに関して共有される情報の量を制限します。外側のページですでに把握されている情報と、クロスオリジン サブツリーが bfcache をブロックしたかどうかの情報のみが含まれます。ブロックの理由やサブツリーの下位レベルに関する情報は含めません(一部のサブレベルが同じオリジンの場合も同様です)。
次に例を示します。
{
blocked: false,
children: [
{ url: "a.com", src: "c.a.com", id: "c", name: "c", blocked: true, reasons: [ "ScreenReader" ], children: [] },
/* cross-origin frame */
{ url: "", src: "b.com", id: "d", name: "d", blocked: true, reasons: [], children: [] }
],
id: "",
name: "",
reasons: [],
src: "",
url:"a.com"
}
複数のクロスオリジン フレームでブロックの理由がある場合、1 つのクロスオリジン iframe がランダムに選択され、bfcache がブロックされたかどうかがレポートされます。残りのフレームでは、blocked
値として null
を報告します。これは、不正な行為者が、複数のサードパーティ フレームを 1 ページに埋め込んで各フレームのブロック情報を比較することで、管理していないサイトでのユーザーの状態に関する情報を推測するのを防ぐためです。
{
blocked: false,
children: [
/* cross-origin frames */
{url: "", src: "b.com", id: "b", name: "b", blocked: null, reasons: [], children: []},
{url: "", src: "c.com", id: "c", name: "c", blocked: true, reasons: [], children: []},
{url: "", src: "d.com", id: "d", name: "d", blocked: null, reasons: [], children: []}
]
id: "",
name: "",
reasons: [],
src: "",
url:"a.com"
}
セキュリティとプライバシーに関する考慮事項について詳しくは、説明のセキュリティとプライバシーをご覧ください。
ブロックの理由
すでに説明したように、さまざまな原因が考えられますが、理由に関する文字列とその意味については、便利なスプレッドシートにまとめられています。
注目すべき理由は、主にいくつかのカテゴリーがあります。
Circumstantial
: デベロッパーのページコードに直接関係のないブロックの理由です。たとえば、関連するコンポーネントがクラッシュした、読み込みプロセスでエラーが発生した、ページがキャッシュに保存できない一時的な状態になっている、メモリ不足が原因で bfcache が無効になっている、Service Worker がページに対してなんらかの操作を行ったため、キャッシュの対象外となった、などです。Extensions
: 拡張機能に関連するメッセージにはいくつかの理由があります。通常、「拡張機能」の理由にはさまざまな理由が組み合わされます。拡張機能に関連するブロックの理由についてあいまいにしています。ユーザーがインストールした拡張機能、ページでアクティブになっている拡張機能、ユーザーの操作などについて、過剰な情報を提供しないようにするためです。PageSupportNeeded
: デベロッパーのコードが使用しているウェブ プラットフォーム機能は、本来は bfcache でブロックされていませんが、現在は bfcache でブロックされています。たとえば、ページには現在、登録済みのリスナーを持つ BroadcastChannel があるか、開いている IndexedDB 接続があります。または、ページにunload
ハンドラが登録されており、現在一部のブラウザで bfcache を使用できなくなっています。SupportPending
: デベロッパーのコードが、ページを bfcache の対象から外すウェブ プラットフォーム機能(Web Serial API、Web Authentication API、File System Access API、Media Session API など)を使用しています。または、ページでCache-Control: no-store
が使用されているため、現在一部のブラウザで bfcache を使用できません。このカテゴリは、bfcache をブロックしているツール(スクリーン リーダーや Chrome のパスワード マネージャーなど)がページ外に存在する場合の報告にも使用されます。
フィードバック
Chromium チームでは、bfcache notRestoredReasons
API の使用体験についてお聞かせください。
API の設計についてお聞かせください
API に関して、想定したとおりに動作しない点はありますか。あるいは、アイデアを実装するために必要なメソッドやプロパティが欠落していないか?セキュリティ モデルについてご質問やご意見がある場合は、対応する [GitHub リポジトリ][feedback] で仕様の問題を提出するか、既存の問題にご意見をお寄せください。
実装に関する問題を報告する
Chromium の実装でバグが見つかりましたか?それとも、実装が仕様と異なりますか?
new.crbug.com でバグを報告します。可能な限り詳細な情報と再現手順を記載し、コンポーネントを UI > Browser > Navigation > bfcache
として指定します。Glitch を使えば、再現をすばやく簡単に共有できます。
API のサポートを表示する
bfcache notRestoredReasons
API を使用する予定はありますか?皆様からの一般公開のサポートは、Chromium チームによる機能の優先順位付けに役立ち、他のブラウザ ベンダーのサポートがいかに重要であるかを示しています。
ハッシュタグ #NotRestoredReasons
を使用して @ChromiumDev 宛てにツイートを送信し、使用場所と使用方法をお知らせください。