PWA는 설치성, 오프라인성, 업데이트 통제를 함께 맞춘다

Next.js에서 PWA를 붙일 때는 파일 하나가 아니라 manifest, service worker, 캐시 정책, 운영 검증이 같이 맞아야 한다.

identity

manifest.json

앱 이름, 아이콘, 시작 URL, display 모드를 브라우저에 알려 설치 가능한 앱 정체성을 만든다.

worker

service worker

요청을 가로채 캐시와 오프라인 fallback을 결정한다. 개발 모드에서는 보통 비활성화한다.

cache

runtime caching

정적 파일, 이미지, 페이지, API마다 freshness 요구가 달라 전략을 분리해야 한다.

release

production check

HTTPS, Application 탭, Offline 모드, Lighthouse로 실제 설치성과 오프라인 동작을 확인한다.

항목확인 위치좋은 상태나쁜 신호
manifestpublic/manifest.json아이콘과 start_url이 유효설치 버튼이 뜨지 않음
service workerApplication / Service Workersactivated, controlleddev 캐시가 계속 남음
offlineNetwork Offline핵심 화면 fallback 표시빈 화면 또는 500
update새 배포 후 새로고침새 버전 안내 가능오래된 asset 고착