홈화면에 추가로 웹을 앱처럼 만들기! (PWA)

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Next.js 14 App Router 환경에서 PWA 구현을 고려하는 개발자

핵심 요약

• PWA 구현을 위해 HTTPS, manifest.json, 서비스 워커 등록 3가지 조건 충족 필요
• Next.js 14 App Router와 next-pwa 호환성 문제로 수동 구현 필요
• sw.js 동적 캐시 관리 및 manifest.json의 아이콘 크기(192x192, 512x512) 주의

섹션별 세부 요약

PWA 기초 조건

• HTTPS 인증서 필수
• manifest.json 파일 생성: 서비스 이름, 아이콘, 시작 URL 등 포함
• 서비스 워커(sw.js) 등록: 오프라인 지원 및 캐시 관리

Next.js 14 App Router 호환성 문제

• next-pwa 라이브러리가 App Router 완전 지원 X → 수동 구현 필수
• sw-template.js 파일 생성 후 BUILD_SW_DATE 변수 동적 대체
• ci.yml에 특정 프로젝트 대상 스크립트 실행 조건 추가

서비스 워커 수동 구현

• sw.js 생성: 캐시 명(CACHE_NAME)과 요청 경로(urlsToCache) 정의
• install, activate, fetch 이벤트 핸들러 구현
• 캐시 버전 관리 및 클라이언트 자동 업데이트 처리

PWA 설치 유도 기능

• beforeinstallprompt 이벤트 감지 → 사용자 설치 유도 버튼 생성
• useAddToHomeScreen 커스텀 훅으로 설치 상태 관리
• iOS는 사파리 공유 버튼을 통한 홈화면 추가 필요

결론

• PWA 구현 시 HTTPS, manifest.json, 서비스 워커 3가지 조건 필수 확인
• Next.js 14 App Router 환경에서는 수동 구현을 통해 next-pwa 제약 극복
• sw.js의 BUILD_SW_DATE 동적 대체 스크립트와 ci.yml 조건 설정 필수
• 앱 아이콘(192x192)과 스플래시 화면 아이콘(512x512) 크기 준수