프로그레시브 웹 앱 및 미니 정보 표시줄에 관한 배경 정보
프로그레시브 웹 앱 (PWA)은 앱과 같이 즉시 로드되고 안정적이며 설치 가능한 웹사이트를 만드는 패턴입니다.
PWA가 Android에서 설치 가능성 체크리스트를 통과하면 미니 정보 표시줄이라는 Chrome 시스템 대화상자가 브라우저 창 하단에 표시됩니다.
현재 홈 화면에 추가 미니 정보 표시줄은 beforeinstallprompt 이벤트와 동시에 표시됩니다.
Chrome 76의 변경사항
Google은 커뮤니티의 의견을 수렴한 결과, 개발자가 사용자에게 PWA 설치를 요청할 시점을 더 세부적으로 관리하고 싶다는 의견을 확인했습니다. YouTube는 여러분의 의견을 소중히 생각하기에
Chrome 76부터 beforeinstallprompt 이벤트에서 preventDefault()를 호출하여 미니 정보 표시줄을 방지할 수 있습니다.
beforeinstallprompt 이벤트를 사용하면 프로그레시브 웹 앱 설치를 홍보하여 사용자가 쉽게 홈 화면에 추가할 수 있습니다.
Google 커뮤니티에 따르면 홈 화면에 PWA를 설치하는 사용자는 재방문 횟수가 많고 앱에서 보내는 시간이 길며, 해당하는 경우 전환율이 높아 참여도가 높습니다.
미니 정보 표시줄 없이 웹 앱을 홍보하려면 beforeinstallprompt 이벤트를 수신 대기한 다음 이벤트를 저장합니다. 그런 다음 설치 버튼을 추가하거나, 설치 배너를 표시하거나, 피드 내 프로모션 또는 메뉴 옵션을 사용하여 PWA를 설치할 수 있음을 나타내도록 사용자 인터페이스를 업데이트합니다. 사용자가 설치 요소를 클릭하면 저장된 beforeinstallprompt 이벤트에서 prompt()를 호출하여 홈 화면에 추가 모달 대화상자를 표시합니다.
홈 화면에 추가 미니 정보 표시줄의 향후 계획
홈 화면에 추가 정보 표시줄은 여전히 임시 조치입니다. Google에서는 프로그레시브 웹 앱 사용자에게 계속 설치 기능을 제공하면서 탐색 환경의 혼잡을 줄이는 방식으로 이를 실행할 수 있는 새로운 UI 패턴을 실험하고 있습니다.