NavigationPreloadManager: setHeaderValue() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年4月.

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

メモ: この機能はウェブワーカー内で利用可能です。

setHeaderValue() は NavigationPreloadManager インターフェイスのメソッドで、サービスワーカーのナビゲーション事前読み込み中に実行された fetch() 操作の結果として送信されるリクエストに付加される Service-Worker-Navigation-Preload ヘッダーの値を設定します。これは、undefined で解決する空のプロミス (Promise) を返します。

事前読み込みリクエストに Service-Worker-Navigation-Preload ヘッダーが存在することで、サーバーは事前読み込みフェッチリクエストと通常のフェッチリクエストに対して、異なるリソースを返すように構成することができます。既定でこのディレクティブは true に設定されています。このメソッドでは、事前読み込みリクエストに対して複数の異なる応答を構成することが可能なのです。

メモ: このヘッダーを設定することで異なるレスポンスが返される可能性がある場合、サーバーは異なるレスポンスが確実にキャッシュされるように Vary: Service-Worker-Navigation-Preload を設定する必要があります。

js
navigator.serviceWorker.ready
  .then((registration) =>
    registration.navigationPreload.setHeaderValue(newValue),
  )
  .then(() => console.log("Done!"))
  .catch((e) =>
    console.error(`NavigationPreloadManager に対応していません: ${e.message}`),
  );