PWA로 전환

요약 — maknaiagent.net 서비스를 PWA로 전환하려면: 웹 앱 매니페스트, 서비스 워커(캐시 전략 포함), 설치 가능성(홈 화면), **푸시 알림(선택)**을 단계적으로 구현하고 **Next.js 특성(SSR/ISR)**에 맞춰 통합해야 합니다. Next.js App Router용 가이드와 실전 예제를 참고해 구현하세요.

개요

PWA 목표: 오프라인 사용, 빠른 로드, 홈 화면 설치, 푸시 알림(옵션). Next.js 환경에서는 매니페스트와 서비스 워커를 정적 자산으로 제공하고 빌드/배포 파이프라인에 포함시키는 방식이 권장됩니다.

단계별 구현

1 매니페스트 생성

• 파일: /public/manifest.json
• 필수 필드: name, short_name, start_url, display, background_color, icons.
• 아이콘은 192px/512px Web App Icon 포함.

2 서비스 워커 등록

• 서비스 워커 파일: /public/sw.js 또는 Workbox 사용.
• Next.js에서는 클라이언트 진입점에서 navigator.serviceWorker.register('/sw.js') 호출.
• 캐시 전략: HTML은 Network First, 정적 자원은 Cache First, API는 Stale-While-Revalidate 권장.

3 오프라인 페이지와 폴백

• 핵심 페이지(홈, 404, 오프라인) 사전 캐시.
• 동적 콘텐츠는 캐시 키와 만료 정책으로 관리.

4 푸시 알림(선택)

• VAPID 키 생성, 브라우저 푸시 구독, 서버에서 Web Push 전송 구현. 보안(HTTPS) 필수.

5 Next.js 통합 및 빌드

• next.config.js에 정적 파일 경로 확인. App Router 사용 시 서버 렌더링과 서비스 워커 충돌 방지(서비스 워커는 클라이언트 전용) 유의.
• Workbox 또는 next-pwa 같은 플러그인으로 자동화 가능(플러그인 호환성 확인).

6 테스트와 배포

• Lighthouse로 PWA 점수 측정, 오프라인 시나리오 테스트.
• HTTPS 필수, 캐시 무효화 전략(버전 관리) 마련.

보안·운영 팁

• HTTPS, Content Security Policy, 서비스 워커에서 민감 데이터 저장 금지.
• 캐시 사이즈·만료 모니터링, 업데이트 시 사용자 알림(새 버전) 구현.

체크리스트

• [ ] manifest.json 생성 및 아이콘 등록
• [ ] sw.js 등록 및 캐시 전략 적용
• [ ] 오프라인 페이지 준비
• [ ] Lighthouse PWA 점수 ≥ 90 목표
• [ ] HTTPS 및 CSP 적용

원하시면 Next.js용 manifest + sw.js 템플릿과 navigator.serviceWorker 등록 코드를 바로 생성해 드립니다. 응답으로 한 단어만 입력하세요: 생성.