A2HS로 웹 앱을 네이티브처럼 설치하는 방법

A2HS(Add to Home Screen)는 사용자가 브라우저 주소 입력 없이 홈 화면 아이콘으로 웹 앱에 접근하게 하는 기능으로, 네이티브 앱 개발 여력이 없을 때 설치 진입장벽을 낮추는 대안이 된다.

A2HS 적용 3대 조건

A2HS를 활성화하려면 HTTPS로 서비스를 제공해야 하며, 웹 앱 매니페스트(manifest.webmanifest) 파일과 **서비스 워커(sw.js)**를 등록해야 한다. 매니페스트 파일에는 앱 이름, 아이콘(최소 192x192, 512x512 권장), 디스플레이 모드(fullscreen 등) 등을 JSON 형식으로 정의한다. 서비스 워커는 네트워크 요청을 가로채 캐시 데이터를 제공하는 역할을 하지만, A2HS 자체를 위해선 빈 fetch 이벤트 핸들러가 포함된 '껍데기' 워커만으로도 충분하다. HTML head에 매니페스트 링크를 명시하고 스크립트로 워커를 등록하면 크롬 등에서 설치 버튼이 나타난다.

커스텀 UI와 Safari 지원

개발자는 beforeinstallprompt 이벤트를 활용해 모달 등 커스텀 디자인의 설치 버튼을 만들 수 있으며, 이벤트 객체의 prompt 메서드를 호출하면 설치가 시작된다. 다만 iOS Safari는 현재 beforeinstallprompt 이벤트를 지원하지 않아 커스텀 UI 사용이 불가능하다. iOS에서는 사용자가 Safari 하단의 공유 버튼을 통해 '홈 화면에 추가'를 선택해야 한다.