2026년 프로그레시브 웹 앱은 브라우저가 설치 프롬프트를 더 눈에 띄게 만들면서 설치율이 향상되어 그 어느 때보다 강력합니다. 이 가이드는 실제로 설치되고, 오프라인에서 작동하고, 푸시 알림을 보내는 PWA의 기술적 요구사항을 다룹니다.
2026년 PWA 요구사항
모던 브라우저에서 설치 가능하려면 다음 기준을 충족해야 합니다:
- HTTPS로 서빙
fetch이벤트 핸들러가 있는 등록된 서비스 워커- 필수 필드가 있는 웹 앱 매니페스트
- 최소 192×192 픽셀의 아이콘
- 성공적으로 로드되는
start_url
웹 앱 매니페스트
매니페스트는 설치 시 앱이 어떻게 보이는지 정의합니다. display: standalone은 브라우저 크롬을 제거합니다. 설치된 앱이 네이티브 앱처럼 보입니다.purpose: maskable — 512px 아이콘은 Android의 원형 아이콘 마스크와 함께 작동하기 위한 안전 영역 패딩이 있어야 합니다.
서비스 워커: 캐시 전략
| 전략 | 최적 사용 사례 | 신선도 |
|---|---|---|
| 캐시 우선 | 폰트, 이미지, 정적 에셋 | 캐시 만료까지 오래됨 |
| 네트워크 우선 | API 응답, 사용자 데이터 | 온라인 시 항상 신선 |
| Stale While Revalidate | HTML 페이지, 뉴스 피드 | 배경 갱신으로 즉시 |
푸시 알림
VAPID 키는 서버와 푸시 서비스 간 인증에 필요합니다. 다음으로 생성하세요:npx web-push generate-vapid-keys
설치 프롬프트 UX
앱이 설치 기준을 충족하면 브라우저가 beforeinstallprompt 이벤트를 발생시킵니다. 첫 방문 때는 설치 프롬프트를 표시하지 마세요. 사용자가 참여를 보인 후(3회 이상 페이지 조회, 2분 이상 사이트 체류, 또는 의미 있는 작업 후) 표시하세요.
Lighthouse PWA 감사
Lighthouse의 PWA 감사는 모든 설치 가능성 요구사항을 확인합니다. 100점은 앱이 완전히 설치 가능하고 PWA 모범 사례를 따른다는 의미입니다.