Next.js PWA

Next.js PWA 구성

PWA는 설치 가능한 앱 경험을 위해 manifest, service worker, 캐시 전략, 오프라인 fallback, 업데이트 흐름을 함께 설계한다.

01

manifest 작성

앱 이름, 아이콘, 시작 URL, display, theme color를 정의해 설치 가능성을 만든다.

manifest
02

서비스 워커

next-pwa 또는 직접 등록 방식으로 요청 가로채기와 캐시 제어를 맡긴다.

service worker
03

캐시 전략

정적 asset, API 응답, 이미지마다 cache-first, network-first 같은 정책을 다르게 둔다.

strategy
04

오프라인 UX

네트워크 실패 시 빈 화면 대신 offline page, stale data, retry 경로를 제공한다.

fallback
Install
A2HS 조건은 manifest, icon, HTTPS, service worker가 함께 맞아야 한다. 아이콘 크기와 maskable 설정도 모바일 설치 품질에 영향이 있다.
add to home screen
Cache
모든 요청을 cache-first로 두면 오래된 데이터가 사용자에게 남는다. 콘텐츠 성격별 freshness 요구를 나눠야 한다.
stale risk
Update
서비스 워커 업데이트는 즉시 반영되지 않을 수 있다. 새 버전 알림과 새로고침 유도 UX를 설계한다.
SW lifecycle

PWA 검증

HTTPS 운영 도메인에서 service worker 등록 조건을 만족한다.
오프라인 네트워크 차단 상태에서 핵심 화면 fallback을 직접 확인한다.
캐시 무효화 새 배포 뒤 오래된 asset이 계속 쓰이지 않는다.

PWA 축

manifest.json -> service worker -> runtime caching -> offline fallback -> update prompt