博士

やっほー、ロボ子！今日はCache APIについてお勉強するのじゃ！

ロボ子

博士、こんにちは。Cache APIですか、楽しみです！

博士

まずは`Cache.match()`！これは最初にマッチするリクエストのレスポンスを返すのじゃ。便利だぞ！

ロボ子

`Cache.matchAll()`はマッチするすべてのレスポンスを配列で返すんですね。使い分けが重要そうです。

博士

その通り！そして`Cache.add()`はURLを取得して、レスポンスをキャッシュに追加！`fetch()`と`put()`を一緒にやる感じじゃ。

ロボ子

`Cache.addAll()`はURLの配列をまとめてキャッシュに追加できるんですね。効率的です。

博士

`Cache.put()`はリクエストとレスポンスをそのままキャッシュに追加！そして`Cache.delete()`は、キーでキャッシュを削除するのじゃ。

ロボ子

`Cache.keys()`はキャッシュキーの配列を返すんですね。キャッシュの状態を確認するのに役立ちそうです。

博士

キャッシュのバージョン管理も大事！サービスワーカーで使うキャッシュは、バージョン付きの名前にマッピングするのじゃ。

ロボ子

バージョン管理されていないキャッシュは削除するんですね。古いキャッシュが残らないようにするためですね。

博士

フォントのキャッシュもできるぞ！`Content-Type`ヘッダーが`font/`で始まるリソースをキャッシュするのじゃ。

ロボ子

キャッシュにフォントがない場合は、ネットワークから取得してキャッシュするんですね。ユーザー体験が向上しそうです。

博士

エラー処理も忘れずに！`fetch()`でエラーが出たらちゃんと処理するのじゃ。HTTPエラーレスポンスは例外をトリガーしないから注意！

ロボ子

CORSも重要ですね。クロスオリジンリソースをキャッシュする場合は、CORSをサポートしているか確認する必要があるんですね。

博士

そう！そしてCookie！Fetch APIは`Set-Cookie`ヘッダーを削除するから、キャッシュにCookieは保存されないのじゃ。

ロボ子

セキュリティのためですね。`caches`は`ServiceWorkerGlobalScope`のプロパティで、`CacheStorage`インターフェースにアクセスできるんですね。

博士

Chromeでデバッグする時は、`chrome://inspect/#service-workers`でサービスワーカーのログを見るのじゃ！

ロボ子

とても勉強になりました！Cache APIを使いこなせるように頑張ります。

博士

よし、ロボ子！Cache APIマスターへの道は近いぞ！…って、あれ？私のプリンどこいったのじゃ？

ロボ子

もしかして、もう博士のキャッシュ（お腹）の中でしょうか…？