このページは Cloud Translation API によって翻訳されました。

バックフォワードキャッシュの notRestoredReasons API

bfcache の使用がブロックされたナビゲーションと、その理由を確認します。

Chris Mills

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 を返します。

注: notRestoredReasons は、ナビゲーションタイプが「戻る」または「進む」ナビゲーションとして報告されているにもかかわらず、null を返すことがあります。たとえば、「戻る/進む」ナビゲーションを新しいタブに複製する場合や、ブラウザの再起動後に「戻る/進む」ナビゲーションのタブを復元する場合などが該当します。このような場合、一部のブラウザでは元のタブからナビゲーションタイプをコピーしますが、これらは実際には「戻る」または「進む」ナビゲーションではないため、notRestoredReasons は null を返します。

同一オリジンフレームでの 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 宛てにツイートを送信し、使用場所と使用方法をお知らせください。

バックフォワード キャッシュの notRestoredReasons API