Vue Academy · レッスン

Service Workerの戦略

Cache First、Network First、Stale While Revalidate――リソース種別ごとの選択

「Service Workerの戦略」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

キャッシュ戦略の概要

サービスワーカーはネットワークリクエストをインターセプトし、キャッシュ、ネットワーク、またはその両方のどれから配信するかを判断します。Workbox には主要な戦略が 4 つあり、それぞれ異なる種類のリソースに適しています。

CacheFirst

CacheFirst はキャッシュから配信し、キャッシュにない場合のみネットワークへアクセスします。フォントや画像など、ほとんど変更されず、コンテンツハッシュが付与されるアセットに最適です。

// serve cached, fall back to network on miss

NetworkFirst

NetworkFirst はまずネットワークを試し、オフラインの場合やタイムアウトした場合はキャッシュにフォールバックします。鮮度が重要でありながら、オフラインでも利用したい API レスポンスに最適です。

// try network, fall back to cache when offline

StaleWhileRevalidate

StaleWhileRevalidate は速度を優先してキャッシュ済みのコピーをすぐに返しながら、バックグラウンドで最新のコピーを取得してキャッシュを更新します。JS バンドルや CSS に適しています。

// return cache now, update cache in background

NetworkOnly と CacheOnly

この 2 つは両極端の戦略です。NetworkOnly は常に取得し、キャッシュを使いません。一方、CacheOnly は事前キャッシュされたコンテンツだけを配信します。キャッシュできない POST や、厳密に事前キャッシュするアセットに使用します。

runtimeCaching 配列

Workbox の設定では、runtimeCaching はルールの配列です。各ルールでリクエスト URL に一致する条件を指定し、戦略とキャッシュ名を割り当てます。

VitePWA({
  workbox: {
    runtimeCaching: [ /* rules */ ]
  }
});

urlPattern ルール

各ルールには urlPattern（正規表現または関数）、handler（戦略名）、キャッシュ名などの options があります。

{
  urlPattern: /\/api\//,
  handler: "NetworkFirst",
  options: { cacheName: "api-cache" }
}

静的アセットのキャッシュ CacheFirst

画像とフォントに一致するルールを設定し、CacheFirst で配信します。これらはファイルが変更されると、コンテンツハッシュ付きの URL も変わるためです。

{
  urlPattern: /\.(?:png|jpg|svg|woff2)$/,
  handler: "CacheFirst",
  options: { cacheName: "static-assets" }
}

JS バンドルのキャッシュ StaleWhileRevalidate

スクリプトとスタイルのバンドルをキャッシュからすぐに配信し、バックグラウンドで更新します。

{
  urlPattern: /\.(?:js|css)$/,
  handler: "StaleWhileRevalidate",
  options: { cacheName: "assets" }
}

Expiration プラグイン

制限を設けないと、キャッシュは際限なく増加します。expiration オプションでエントリ数と最大保存期間に上限を設定し、古いものから削除できます。

options: {
  cacheName: "api-cache",
  expiration: {
    maxEntries: 50,
    maxAgeSeconds: 60 * 60 * 24
  }
}

不透明なレスポンスのキャッシュ

クロスオリジンの API レスポンスには、許可するステータスを指定した cacheableResponse を追加することがよくあります。これにより、成功したレスポンスだけが保存されます。

options: {
  cacheableResponse: { statuses: [0, 200] }
}

クイックチェック

新鮮な状態を保ちながらオフラインでも利用できる API レスポンスには、どの戦略が最適ですか？

まとめ

Workbox の戦略はリソースの種類に対応しています。静的アセットには CacheFirst、API レスポンスには NetworkFirst、JS／CSS バンドルには StaleWhileRevalidate を使います。runtimeCaching 配列で、urlPattern、handler、そして expiration プラグインのようにキャッシュサイズを制限する options を指定します。

よくある質問

「Service Workerの戦略」レッスンは無料ですか？

はい。「Service Workerの戦略」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「Service Workerの戦略」で何を学びますか？

Cache First、Network First、Stale While Revalidate――リソース種別ごとの選択ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「Service Workerの戦略」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る