⚡
Service Workerライフサイクル — install、activate、fetchの順序
PWAの核心、オフラインキャッシュが動作するメカニズム
ライフサイクル
- register — SWファイルダウンロード
- install — 初回セットアップ、静的リソースをpre-cache
- waiting — 前のSWが活性化中なら待機。
skipWaiting()で即時活性化 - activate — 古いキャッシュを整理
- 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アプリ
静的サイトキャッシング — ブログ/ドキュメントサイトの即時ロード