Cache API
レスポンスをキャッシュに保存し、そこから提供します。
「Cache API」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
Cache APIとは
Cache APIは、リクエストとレスポンスの組を名前付きキャッシュに保存します。Service Workerはこれを使ってネットワークに接続せずにアセットを提供します。これがオフライン対応の基盤になります。
cachesオブジェクト
グローバルなcachesオブジェクト（CacheStorage）は、すべての名前付きキャッシュを管理します。ページとService Workerの両方で利用できます。
// Available globally:
// caches.open(name)
// caches.match(request)
// caches.delete(name)
// caches.keys()キャッシュを開く
caches.open(name)は、指定した名前のキャッシュを表すPromiseを返します。キャッシュが存在しない場合は作成します。名前を使うことで、キャッシュをバージョン管理できます。
caches.open('static-v1').then(cache => {
console.log('cache ready');
});addAllで事前キャッシュする
install中にcache.addAll(urls)を呼び出すと、アセットのリストを取得して1回の呼び出しで保存します。いずれかの取得に失敗すると、処理全体がrejectされます。
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('static-v1').then(cache =>
cache.addAll(['/', '/styles.css', '/app.js'])
)
);
});waitUntil
event.waitUntil(promise)は、Promiseが完了するまでService Workerを実行し続けるようブラウザーに伝えます。インストールが早く完了しすぎないよう、キャッシュの準備処理をこれでラップします。
self.addEventListener('install', (event) => {
event.waitUntil(setupCache());
});1件のエントリを追加する
cache.put(request, response)は1つのレスポンスを保存し、cache.add(url)は1つのURLを取得して保存します。保存するレスポンスをすでに持っている場合はputを使用します。
const cache = await caches.open('static-v1');
const response = await fetch('/logo.png');
await cache.put('/logo.png', response);キャッシュから検索する
cache.match(request)は、保存されたレスポンスを検索します。一致するレスポンスがあればそれに解決され、一致しない場合はundefinedに解決されます。
const cache = await caches.open('static-v1');
const hit = await cache.match('/styles.css');
if (hit) console.log('served from cache');caches.matchのショートカット
caches.match(request)は、すべてのキャッシュを一度に検索します。アセットがどのキャッシュに保存されているかを気にしない場合に、fetchハンドラーで便利です。
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(hit =>
hit || fetch(event.request)
)
);
});respondWith
fetchイベント内で、event.respondWith(promise)はブラウザーが使用するレスポンスを提供します。キャッシュ済みまたは新しく取得したResponseで解決します。
self.addEventListener('fetch', (event) => {
event.respondWith(handleRequest(event.request));
});レスポンスの複製
レスポンスの本文は1回しか読み取れません。レスポンスを返すと同時に保存するには、先に複製します。
const response = await fetch(request);
cache.put(request, response.clone()); // store a copy
return response; // return the originalキャッシュエントリの削除
cache.delete(request)は1つのエントリを削除し、caches.delete(name)は名前付きキャッシュ全体を削除します。古いアセットを追い出すには、これらを使用します。
await cache.delete('/old-asset.js');
await caches.delete('static-v0'); // remove old cache version理解度チェック
Cache APIについての理解度を確認しましょう。
まとめ
Cache APIについて学びました。
caches.open(name)で名前付きキャッシュを取得または作成します。addAllで事前キャッシュし、putまたはaddでエントリを保存します。matchで取得し、caches.matchですべてのキャッシュを検索します。respondWithでfetch時のレスポンスを提供します。- キャッシュして返す前にレスポンスを複製します。
次は、キャッシュ戦略です。
よくある質問
「Cache API」レッスンは無料ですか？
はい。「Cache API」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「Cache API」で何を学びますか？
レスポンスをキャッシュに保存し、そこから提供します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「Cache API」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。