페이지 5: 앱 배포 및 설치 경험 최적화

5. 앱 배포 및 설치 경험 최적화

PWA의 가장 큰 특징 중 하나는 사용자가 웹사이트를 장치에 쉽게 설치(Add to Home Screen, A2HS)할 수 있다는 것입니다. 이 경험을 최적화하는 것이 중요합니다.

5.1. 설치 프롬프트(A2HS) 사용자 정의

브라우저가 설치 가능성을 감지하면 beforeinstallprompt 이벤트가 발생합니다. 이 이벤트를 가로채서 사용자 정의 설치 버튼을 표시할 수 있습니다.

let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // 브라우저의 기본 설치 프롬프트 방지
  e.preventDefault();
  // 이벤트 객체를 저장하여 나중에 사용자 정의 버튼 클릭 시 사용
  deferredPrompt = e;
  // 사용자 정의 설치 버튼 표시 로직...
});

사용자가 버튼을 클릭하면, 저장해둔 deferredPrompt.prompt()를 호출하여 설치 대화상자를 띄울 수 있습니다.

5.2. 최종 배포 전 체크리스트

• 모든 페이지가 오프라인에서도 작동하는지 확인합니다.
• Manifest 파일의 모든 아이콘과 색상 설정이 올바른지 확인합니다.
• Lighthouse Audit 점수가 목표치를 만족하는지 최종 확인합니다.
• HTTPS가 올바르게 설정되었는지 확인합니다.

이 5단계를 모두 완료했다면, 사용자에게 네이티브 앱과 같은 경험을 제공하는 PWA를 성공적으로 배포할 준비가 된 것입니다.