Service Workerライフサイクル — install、activate、fetchの順序

PWAの核心、オフラインキャッシュが動作するメカニズム

ライフサイクル

  1. register — SWファイルダウンロード
  2. install — 初回セットアップ、静的リソースをpre-cache
  3. waiting — 前のSWが活性化中なら待機。skipWaiting()で即時活性化
  4. activate — 古いキャッシュを整理
  5. fetch — 全ネットワークリクエストをインターセプト

キャッシュ戦略

  • Cache First — 静的リソース向け

  • Network First — APIレスポンス向け

  • Stale While Revalidate — 速度+鮮度のバランス

注意

SWはHTTPSでのみ動作(localhost例外)。一度登録すると永続。バグのあるSWをデプロイするとユーザーがキャッシュを手動クリアするまでバグが続く。

キーポイント

1

register→install(静的リソースpre-cache)→activate(古キャッシュ整理)→fetch(リクエストインターセプト)

2

fetchイベントでキャッシュ/ネットワーク戦略選択(Cache First、Network First等)

3

HTTPS必須(localhost例外)。skipWaiting() + clients.claim()で即時活性化

4

SW更新戦略が重要 — バグのあるSWが永久常駐する可能性

ユースケース

PWA — オフラインでも動作するWebアプリ 静的サイトキャッシング — ブログ/ドキュメントサイトの即時ロード