프론트엔드
홈 화면에 웹 바로가기를 추가하기(A2HS)
두줄요약
A2HS의 조건과 매니페스트·서비스 워커를 이용한 최소 설정 방식을 설명했습니다. React 커스텀 설치 UI와 iOS Safari의 지원 제약도 함께 다뤘습니다.
구조와 흐름
- HTTPS, 웹 앱 매니페스트, 서비스 워커 등록을 통한 A2HS 적용 조건
- 매니페스트의 이름·아이콘·시작 URL·표시 모드·화면 방향 설정
- HTML 매니페스트 연결과 빈 fetch 핸들러 기반 서비스 워커 등록
선택 이유
- 브라우저 주소 입력 없이 홈 화면 아이콘으로 웹 앱 접근
- 앱 스토어 검색·인증·설치 시간 없이 낮은 설치 진입장벽
- fullscreen 설정을 통한 브라우저 UI 없는 네이티브 앱 유사 실행
주의할 점
- Safari의 매니페스트 아이콘 미사용에 따른 apple-touch-icon 별도 명시
- scope 밖 URL의 일반 브라우저 열림
- iOS Safari의 beforeinstallprompt 미지원과 커스텀 설치 UI 제약
적용해볼 점
- beforeinstallprompt 이벤트와 React hook 기반 커스텀 설치 모달
- 서비스 워커 캐싱을 통한 느리거나 끊긴 네트워크 환경 대응
