Cache.match()

request

Cache 内でレスポンスを見つけようとしている Request。 これは、Request オブジェクトまたは URL です。

options 省略可

match 操作のオプションを設定するオブジェクト。 使用可能なオプションは次のとおりです。

ignoreSearch

論理値で、URL のクエリー文字列を無視するかどうかを指定します。 例えば、true に設定すると、http://foo.com/?value=bar の ?value=bar の部分は、照合の実行時に無視されます。 既定値は false です。

ignoreMethod

論理値で、true に設定すると、照合操作が Request の http メソッドを検証しないようにします（通常、GET および HEAD のみが許可されます）。 既定値は false です。

ignoreVary

論理値で、true に設定すると、VARY ヘッダーの照合を実行しないように照合操作に指示します。 つまり、URL が一致する場合、Response オブジェクトに VARY ヘッダーがあるかどうかに関係なく一致します。 既定値は false です。

リクエストに一致した最初の Response に解決し、一致するものが見つからない場合は undefined に解決する Promise です。

この例は、カスタムオフラインページの例（ライブデモ）からの引用です。 リクエストが失敗した場合、キャッシュを使用して選択したデータを提供します。 catch() 句は、fetch() の呼び出しが例外をスローしたときにトリガーされます。 catch() 句の内部では、 match() を使用して正しいレスポンスを返します。

この例では、HTTP の GET メソッドで取得された HTML 文書のみがキャッシュされます。 if () 条件が false の場合、このフェッチハンドラーはリクエストに介入しません。他のフェッチハンドラーが登録されている場合、それらは event.respondWith() を呼び出す機会を得ます。 フェッチハンドラーが event.respondWith() を呼び出さなかった場合、リクエストはブラウザーによって処理され、サービスワーカーが関与していないかのように処理されます。 fetch() が 4xx または 5xx の範囲のレスポンスコードで有効な HTTP レスポンスを返す場合、catch() は呼び出されません。

self.addEventListener("fetch", (event) => {
  // これが HTML 文書に対する GET リクエストである場合のみ、event.respondWith() を呼び出します。
  if (
    event.request.method === "GET" &&
    event.request.headers.get("accept").includes("text/html")
  ) {
    console.log("フェッチイベントの処理: ", event.request.url);
    event.respondWith(
      fetch(event.request).catch((e) => {
        console.error("フェッチ失敗、代わりにオフラインページに戻ります。", e);
        return caches
          .open(OFFLINE_CACHE)
          .then((cache) => cache.match(OFFLINE_URL));
      })
    );
  }
});

• サービスワーカーの使用
• Cache
• caches