Service Worker詳細（サービスワーカーショウサイ）

概要\n\nService Worker(SW)はWebブラウザ内で独立実行される常駐JavaScriptコンテキストで、メインのページスレッドとは別ライフサイクルで動作する。2014年5月Chrome 40で初実装開始、2018年までにChrome/Firefox/Safari/Edge全主要モダンブラウザ対応完了、Microsoft IE のみ非対応。HTTPS環境(localhost例外)でのみ動作、ネットワーク要求の傍受・キャッシュ・プッシュ通知配信・バックグラウンド同期等を担当する。Cache Storage API(Workbox標準パターン)・Fetch API(プロキシ的傍受)・Push API(Web Push Protocol)・Background Sync API(オフライン送信)・Periodic Background Sync(定期更新、Chrome のみ)等を統合提供、Google Workbox(2017-、github.com/GoogleChrome/workbox)が事実上のパターン標準ライブラリ。Progressive Web App(PWA)技術の中核、Twitter Lite(2017)・Pinterest PWA(2018)・Spotify Web Player・YouTube Music Web等が採用、ネイティブアプリ並みのオフライン体験を提供。Next.js 13+のApp Router・Vue Nuxt 3・SvelteKit等のフレームワークもPWA Plugin提供、jisaku.com 含むNext.js 16構築サイトでも標準的PWA構成可能。\n\n## 主な特徴・仕組み\n\n- 登録: navigator.serviceWorker.register("/sw.js") でJS登録\n- ライフサイクル: install → activate → fetch/message events\n- HTTPS必須: 中間者攻撃対策、localhost のみ例外で開発許可\n- スコープ: 登録URL以下の全パスを制御、/sw.js ならドメイン全体\n- Cache Storage API: cache.put/match/delete でレスポンス保存・取得\n- Fetch傍受: event.respondWith() で fetch リクエストレスポンス改変可\n- Push通知: Web Push Protocol(RFC 8030)+VAPID鍵で iOS Safari 16.4+対応\n- Background Sync: ネットワーク復帰時に保留タスク再実行、メール送信等\n\n## スペック比較表\n\n| API | 機能 | ブラウザ対応 | 用途 |\n|-----|------|--------------|------|\n| Cache Storage API | レスポンス保存・取得 | 全モダン | オフライン |\n| Fetch API in SW | ネットワーク傍受 | 全モダン | プロキシ |\n| Push API | プッシュ通知 | 全 + iOS 16.4+ | 通知 |\n| Background Sync | オフライン送信 | Chrome/Edge | 同期 |\n| Periodic Background Sync | 定期更新 | Chrome のみ | フィード |\n| Web Push Protocol | RFC 8030 | 全 | 通知配信 |\n| Workbox | Googleパターン | 全SW環境 | 開発効率化 |\n| Service Worker module | ES Module | Chrome 91+/Firefox 130+ | モダン構文 |\n\n## 具体例・対応製品\n\n- Twitter Lite (2017-): 初期PWA成功事例、データ通信量97%削減\n- Pinterest PWA (2018-): モバイル広告収入30%増、エンゲージメント60%増\n- Spotify Web Player: SW+Cache Storageでオフライン部分対応\n- Workbox v7 (2024): github.com/GoogleChrome/workbox、5パターンレシピ\n- Next.js next-pwa plugin: Next.js統合、ServiceWorker自動生成\n\n## 自作PCでの選び方・注意点\n\nPWA開発・SW検証用PC構成例: (A)Web開発¥200,000構成: M3 Mac mini 16GB(¥130,000) + Chrome DevTools + Safari Web Inspector、(B)Windows¥150,000構成: Ryzen 5 7600X(¥30,000) + 32GB DDR5 + WSL2 + Chrome/Edge/Firefox、(C)モバイル検証¥80,000追加構成: iPhone 15(¥124,800) + Android(Pixel 8a ¥85,000)、SW実機検証必須。Lighthouse CI でPWA監査、PWA Builder(Microsoft)でManifest検証、Chrome DevTools の Application タブで Service Worker 状態モニタリング。HTTPS必須なので開発環境は ngrok/Cloudflare Tunnel/Vite mkcert で localhost を https://*.local 化。\n\n## 関連用語との違い\n\n: 並列計算用バックグラウンドスレッド、SWより古い。SWはネットワーク傍受・キャッシュ・通知特化、WWは純粋計算用途で機能領域異なる。\n\n: 複数タブ間共有のWorker、Firefox/Chrome対応も限定的使用。SWのほうがPWA文脈で圧倒的存在感。\n\n## よくある質問(FAQ)\n\n\nA: localStorage/IndexedDB のみでも限定的にオフラインデータ保持可、ただしネットワーク傍受不可。SW + Cache Storage の組合せが標準的PWA構成。\n\n\nA: 2023年iOS 16.4+でWebプッシュ通知正式対応、それ以前は Push API 不可。Background Sync は2026年現在も非対応、フォアグラウンド更新が現実的。\n\n\nA: 必須ではないが標準パターン化で生産性向上、Cache First/Network First/Stale While Revalidate等の戦略を1行設定で実装可能。Next.js next-pwa等もWorkbox基盤。\n\n## まとめ\n\n- ブラウザ常駐JavaScriptコンテキスト\n- Cache Storage/Fetch/Push/Background Sync API提供\n- HTTPS必須、Twitter/Pinterest/Spotify がPWA採用\n- 2026年全モダンブラウザ対応、iOS Safari 16.4+ Push対応\n- Workbox v7 が事実上のパターン標準ライブラリ