Frontend Academy · レッスン

オフラインキャッシュ戦略：CacheFirst・NetworkFirst

Cache APIとWorkboxライブラリを使い、静的アセットにはCache-First、APIレスポンスにはNetwork-Firstを実装します。

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

キャッシュ戦略が重要な理由

service workerはすべてのfetchを横取りできますが、戦略が必要です。コンテンツごとに適したルールは異なります。ロゴは永続的にキャッシュし、APIレスポンスは常に最新にし、ニュース記事にはstale-while-revalidateが適しています。

Cache API

service workerはCache APIを使用します。これはRequest → Responseのペアを格納する、オリジンごとにスコープが設定されたキーバリューストアです。セッションをまたいで保持されます。

// open a cache:
const cache = await caches.open('v1');

// add resources:
await cache.add('/styles.css');
await cache.addAll(['/', '/app.js', '/styles.css']);

// look up:
const response = await cache.match('/styles.css');

// delete:
await cache.delete('/styles.css');

Cache First

まずキャッシュを確認します。見つかった場合はそれを返します。見つからない場合はネットワークにフォールバックし、レスポンスをキャッシュします。適しているもの: 静的アセット、フォント、ロゴ、アプリシェル。

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(cached => {
      if (cached) return cached;
      return fetch(event.request).then(res => {
        const clone = res.clone();
        caches.open('v1').then(c => c.put(event.request, clone));
        return res;
      });
    })
  );
});

Network First

まずネットワークを試します。失敗した場合（オフラインの場合）はキャッシュにフォールバックします。適しているもの: API呼び出し、速度より新鮮さが重要な動的コンテンツ。

self.addEventListener('fetch', (event) => {
  event.respondWith(
    fetch(event.request).then(res => {
      const clone = res.clone();
      caches.open('api-v1').then(c => c.put(event.request, clone));
      return res;
    }).catch(() => caches.match(event.request))
  );
});

Stale While Revalidate

キャッシュをすぐに返し（高速）、その後バックグラウンドで取得して、次回のためにキャッシュを更新します。適しているもの: アバター、ニュース記事、ある程度の新鮮さが必要なデータ。

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(cached => {
      const network = fetch(event.request).then(res => {
        caches.open('v1').then(c => c.put(event.request, res.clone()));
        return res;
      });
      return cached || network;
    })
  );
});

Network Only

キャッシュを完全に迂回し、常にネットワークへアクセスします。キャッシュできないリクエスト（認証エンドポイント、分析、ミューテーション）に使います。

self.addEventListener('fetch', (event) => {
  if (event.request.url.includes('/api/auth')) {
    event.respondWith(fetch(event.request));
    return;
  }
  // ... other strategies
});

Cache Only

ネットワークにはアクセスせず、キャッシュを返すか失敗します。事前にキャッシュして、セッション中に更新したくないファイルに便利です。

Workboxの戦略

Workboxでは、すべての戦略がnamed classとしてまとめられています。定型コードを減らせます。

import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';

registerRoute(({ request }) => request.destination === 'image',
  new CacheFirst({ cacheName: 'images' })
);

registerRoute(({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst({ cacheName: 'api', networkTimeoutSeconds: 3 })
);

registerRoute(({ request }) => request.destination === 'document',
  new StaleWhileRevalidate({ cacheName: 'pages' })
);

キャッシュの有効期限

上限を設定しない限り、キャッシュは無限に増え続けます。WorkboxにはExpirationPluginが用意されています。

import { ExpirationPlugin } from 'workbox-expiration';

new CacheFirst({
  cacheName: 'images',
  plugins: [new ExpirationPlugin({
    maxEntries: 50,
    maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
  })]
});

キャッシュ可能なレスポンス

ブラウザーはデフォルトで200レスポンスだけをキャッシュします。4xx、5xx、opaque（cross-originのno-cors）レスポンスを除外し、エラーでキャッシュが埋まるのを防ぎます。

オフライン用フォールバックページ

ナビゲーションに失敗したときは、ユーザーにわかりやすいオフラインページを表示します。ブラウザーのデフォルトエラーよりも優れたUXになります。

self.addEventListener('install', (e) => {
  e.waitUntil(caches.open('offline').then(c => c.add('/offline.html')));
});

self.addEventListener('fetch', (e) => {
  if (e.request.mode === 'navigate') {
    e.respondWith(
      fetch(e.request).catch(() => caches.match('/offline.html'))
    );
  }
});

適切な戦略の選び方

静的アセット（ロゴ、フォント、CSS）: Cache First。APIデータ（ユーザープロフィール、フィード）: Network First。ときどき最新になるコンテンツ（アバター、ニュース）: Stale While Revalidate。認証: Network Only。事前にインストールする静的ファイル: Cache Only。

クイックチェック

めったに変更されないものの、高速に読み込む必要があるCSSファイルには、どのキャッシュ戦略が最適ですか？

まとめ: キャッシュ戦略

Cache First: 静的アセット（最速ですが、古い可能性があります）。Network First: APIデータ（最も新鮮ですが、遅くなります）。Stale While Revalidate: キャッシュを返し、バックグラウンドで取得します。Network Only: 認証やミューテーション。Cache Only: 事前にインストールしたシェル。定型コードを減らすにはWorkboxを使います。有効期限の上限を設定します。オフライン用フォールバックページを追加します。リソースの種類ごとに選択します。

よくある質問

「オフラインキャッシュ戦略：CacheFirst・NetworkFirst」レッスンは無料ですか？

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

「オフラインキャッシュ戦略：CacheFirst・NetworkFirst」で何を学びますか？

Cache APIとWorkboxライブラリを使い、静的アセットにはCache-First、APIレスポンスにはNetwork-Firstを実装します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「オフラインキャッシュ戦略：CacheFirst・NetworkFirst」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

Web App Manifest
Service Workerの登録とライフサイクル
オフラインキャッシュ戦略：CacheFirst・NetworkFirst
プッシュ通知

← Frontend Academyに戻る