Service Workerのキャッシュ戦略とは何か？を実例で解説｜install, fetch, activeの役割、キャッシュのバージョン名

// キャッシュのバージョン名。新しいバージョンではこれを変更する。
const STATIC_CACHE_NAME = 'static-v1'; 
const DYNAMIC_CACHE_NAME = 'dynamic-v1'; // 動的キャッシュ（fetchで保存されるもの）用
const CACHES = [STATIC_CACHE_NAME, DYNAMIC_CACHE_NAME];

// 1. install: プリキャッシュ（App Shell）の準備
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(STATIC_CACHE_NAME).then((cache) => {
      // オフラインでも表示したい最小限のリソースを事前にキャッシュ（プリキャッシュ）
      return cache.addAll([
        '/',
        '/styles/app.css',
        '/scripts/app.js',
        '/images/logo.png',
        '/offline.html' // 共通のオフラインページ
      ]);
    })
  );
});

// 2. activate: 古いキャッシュの削除
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          // 現在使用するキャッシュ名（STATIC_CACHE_NAMEとDYNAMIC_CACHE_NAME）以外のキャッシュを削除
          if (!CACHES.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

const STATIC_CACHE_NAME = 'static-v1'; 
const DYNAMIC_CACHE_NAME = 'dynamic-v1'; // 動的キャッシュ（fetchで保存されるもの）用
const CACHES = [STATIC_CACHE_NAME, DYNAMIC_CACHE_NAME];

self.addEventListener('fetch', (event) => {
  // 事前にプリキャッシュしたコアなリソースのみに適用
  if (event.request.url.includes('/styles/app.css')) {
    event.respondWith(
      // キャッシュに存在するもののみを返す。なければエラー（接続エラーのように見える）
      caches.match(event.request)
    );
    return;
  }
});

self.addEventListener('fetch', (event) => {
  // 例: /api/live/ へのリクエストに適用
  if (event.request.url.includes('/api/live/') || event.request.method !== 'GET') {
    // Service Workerを介さず、ネットワークにそのままリクエストを流す
    return; 
  }
  // 他のリクエストは通常の処理へ
});

self.addEventListener('fetch', (event) => {
  // 例: 画像ファイル（.jpg）に適用
  if (event.request.url.includes('.jpg')) {
    event.respondWith(
      caches.match(event.request).then((cachedResponse) => {
        // 1. キャッシュにあればそれを返す (Cache First)
        if (cachedResponse) {
          return cachedResponse;
        }
        
        // 2. なければネットワークへアクセス (Falling Back to Network)
        return fetch(event.request).then((networkResponse) => {
          // 3. ネットワーク成功時に動的キャッシュに保存
          return caches.open(DYNAMIC_CACHE_NAME).then((cache) => {
            cache.put(event.request, networkResponse.clone());
            return networkResponse;
          });
        });
      })
    );
  }
});

self.addEventListener('fetch', (event) => {
  // 例: HTMLナビゲーション（ドキュメントリクエスト）に適用
  if (event.request.mode === 'navigate') {
    event.respondWith(
      fetch(event.request)
        .then((networkResponse) => {
          // 1. ネットワーク成功: キャッシュを更新して最新を返す
          return caches.open(DYNAMIC_CACHE_NAME).then((cache) => {
            cache.put(event.request, networkResponse.clone());
            return networkResponse;
          });
        })
        .catch(() => {
          // 2. ネットワーク失敗: キャッシュからフォールバック
          return caches.match(event.request).then((cachedResponse) => {
            // キャッシュにもなければ、オフラインページを返すなど
            return cachedResponse || caches.match('/offline.html');
          });
        })
    );
  }
});

self.addEventListener('fetch', (event) => {
  // 例: APIデータ（/api/data/）に適用
  if (event.request.url.includes('/api/data/')) {
    // ネットワークリクエストを実行するPromise (裏側の処理)
    const networkFetch = fetch(event.request)
      .then((networkResponse) => {
        // ネットワーク成功時にキャッシュを更新（次回利用のため）
        return caches.open(DYNAMIC_CACHE_NAME).then((cache) => {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        });
      });

    event.respondWith(
      caches.match(event.request).then((cachedResponse) => {
        // 1. キャッシュがあれば即座に返す (Stale)
        if (cachedResponse) {
          // 2. ネットワークの検証は裏側で続行 (Revalidate)
          return cachedResponse;
        }
        
        // 3. キャッシュがなければネットワークの結果を待つ
        return networkFetch;
      })
    );
  }
});

// Service Workerファイル (sw.js) 内の fetch イベント

// キャッシュ名の定義（install/activateイベントで定義したものと同じものを使用）
const STATIC_CACHE_NAME = 'static-v1'; 
const DYNAMIC_CACHE_NAME = 'dynamic-v1';

self.addEventListener('fetch', (event) => {
  const request = event.request;
  const url = new URL(request.url);

  // 1. Network Only (リアルタイムAPIやPOSTリクエストなど)
  // GETリクエストではない、またはリアルタイムAPIの場合
  if (request.method !== 'GET' || url.pathname.includes('/api/live/')) {
    // Service Workerを通過させ、ネットワークに直接アクセスさせる
    return;
  }
  
  // 2. Cache Only (プリキャッシュされたコアな静的アセット)
  // 例: バージョンアップ時以外変わらないコアなCSSファイル
  if (url.pathname.includes('/styles/app.css')) {
    event.respondWith(
      caches.match(request) // キャッシュのみを検索
    );
    return;
  }

  // 3. Network First, Falling Back to Cache (HTMLなど、最新情報が重要なもの)
  // 'navigate'モードは、ブラウザが新しいページに移動する際のリクエスト（通常はHTML）を指す
  if (request.mode === 'navigate') {
    event.respondWith(
      fetch(request)
        .then((networkResponse) => {
          // ネットワーク成功: キャッシュを更新して最新を返す
          return caches.open(DYNAMIC_CACHE_NAME).then((cache) => {
            // キャッシュに入れるためにレスポンスを複製 (.clone()が必要)
            cache.put(request, networkResponse.clone()); 
            return networkResponse;
          });
        })
        .catch(() => {
          // ネットワーク失敗: キャッシュからフォールバック
          return caches.match(request).then((cachedResponse) => {
            // キャッシュにもなければ、プリキャッシュしたオフラインページを返す
            return cachedResponse || caches.match('/offline.html');
          });
        })
    );
    return;
  }
  
  // 4. Stale-While-Revalidate (アバター画像や頻繁に更新されるが即時性も大事なデータ)
  // 例: APIデータやユーザー画像
  if (url.pathname.includes('/api/data/') || url.pathname.includes('/images/user/')) {
    // ネットワークリクエストを開始し、結果をPromiseとして保持
    const networkFetch = fetch(request).then((networkResponse) => {
      // 裏でキャッシュを更新
      return caches.open(DYNAMIC_CACHE_NAME).then((cache) => {
        cache.put(request, networkResponse.clone());
        return networkResponse;
      });
    });

    event.respondWith(
      caches.match(request).then((cachedResponse) => {
        // キャッシュにあれば即座に返し (Stale)、裏で networkFetch を続行 (Revalidate)
        if (cachedResponse) {
          return cachedResponse;
        }
        // キャッシュになければネットワークの結果を待つ
        return networkFetch;
      })
    );
    return;
  }
  
  // 5. Cache First, Falling Back to Network (デフォルトの静的アセット)
  // 上記のどの条件にも当てはまらない、一般的な画像、スクリプト、フォントなどに適用
  event.respondWith(
    caches.match(request).then((cachedResponse) => {
      // 1. キャッシュにあればそれを返す
      if (cachedResponse) {
        return cachedResponse;
      }
      
      // 2. なければネットワークへアクセス
      return fetch(request).then((networkResponse) => {
        // 3. ネットワーク成功時に動的キャッシュに保存
        // ステータスコードが 200 であるか、opaque response (クロスオリジン) でないか確認することが望ましい
        if (!networkResponse || networkResponse.status !== 200 || networkResponse.type !== 'basic') {
          return networkResponse;
        }
        
        return caches.open(DYNAMIC_CACHE_NAME).then((cache) => {
          cache.put(request, networkResponse.clone());
          return networkResponse;
        });
      });
    })
  );
});