app/manifest.ts
MetadataRoute.Manifest를 반환해 이름, 아이콘, start_url, display를 선언한다.
PWA는 설치성, 오프라인성, 업데이트 통제를 함께 맞춘다
Next.js에서 PWA를 붙일 때는 파일 하나가 아니라 manifest, service worker, 캐시 정책, 운영 검증이 같이 맞아야 한다.
service worker
요청을 가로채 캐시와 오프라인 fallback을 결정한다. 개발 모드에서는 보통 비활성화한다.
runtime caching
정적 파일, 이미지, 페이지, API마다 freshness 요구가 달라 전략을 분리해야 한다.
production check
HTTPS, Application 탭, Offline 모드, Lighthouse로 실제 설치성과 오프라인 동작을 확인한다.
| 항목 | 확인 위치 | 좋은 상태 | 나쁜 신호 |
|---|---|---|---|
| manifest | app/manifest.ts | 아이콘과 start_url이 유효 | 설치 버튼이 뜨지 않음 |
| service worker | Application / Service Workers | activated, controlled | dev 캐시가 계속 남음 |
| offline | Network Offline | 핵심 화면 fallback 표시 | 빈 화면 또는 500 |
| update | 새 배포 후 새로고침 | 새 버전 안내 가능 | 오래된 asset 고착 |