Service Worker와 PWA.

SW lifecycle, cache strategies, offline, manifest, install prompt

Service Worker는 브라우저와 네트워크 사이 proxy로, offline cache, push, background sync를 가능하게 합니다. PWA는 SW + manifest로 앱-like 경험.

🔄 Service Worker lifecycle

Service Worker 수명주기와 요청 가로채기

register (navigator.serviceWorker.register)
install — static cache preload
activate — old cache cleanup
fetch — request intercept

HTTPS 필수 (localhost 예외)
DOM 접근 불가, postMessage 통신

📦 Cache strategies (Workbox)

전략	설명
Cache First	cache → network (static asset)
Network First	network → cache (API, fresh content)
Stale While Revalidate	cache 즉시 + background update
Network Only	no cache
Cache Only	offline shell

📱 PWA manifest

{
  "name": "My App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "icons": [{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }]
}

install prompt (beforeinstallprompt)
iOS: Add to Home Screen (제한적)

⚠️ 주의

cache versioning, update prompt (skipWaiting, clients.claim)
stale API cache — TTL, mutation invalidate
Next.js: next-pwa 또는 manual (App Router는 설정 주의)

🔗 참고 자료

MDN: Service Worker API — Service Worker 생명주기와 API를 정리한다.
web.dev Learn PWA — PWA 설치, 오프라인, 매니페스트를 학습 경로로 다룬다.
web.dev: Service workers and the Cache Storage API — 캐시 전략과 Cache Storage 사용을 설명한다.
MDN: Web app manifests — 웹 앱 매니페스트 필드를 레퍼런스로 정리한다.
MDN: Progressive web apps — PWA 개요와 핵심 기능을 모은다.