Chrome 76에서는 홈 화면에 추가 미니 정보 표시줄을 숨길 수 있습니다.

Penny McLachlan

프로그레시브 웹 앱 및 미니 정보 표시줄에 관한 배경 정보

프로그레시브 웹 앱 (PWA)은 앱과 유사하고, 즉시 로드되며, 안정적이고, 설치 가능한 웹사이트를 만드는 패턴입니다.

PWA가 Android에서 설치 가능성 체크리스트를 통과하면 브라우저 창 하단에 미니 정보 표시줄이라는 Chrome 시스템 대화상자가 표시됩니다.

현재 홈 화면에 추가 미니 정보 표시줄은 beforeinstallprompt 이벤트와 동시에 표시됩니다.

Chrome 76의 변경사항

커뮤니티의 의견을 수렴한 결과 개발자가 사용자에게 PWA 설치를 요청하는 시점을 더 세부적으로 관리하고 싶어한다는 것을 알게 되었습니다. YouTube는 여러분의 의견을 소중히 생각하기에

Chrome 76부터 beforeinstallprompt 이벤트에서 preventDefault()를 호출하여 미니 정보 표시줄을 방지할 수 있습니다.

beforeinstallprompt 이벤트를 사용하면 프로그레시브 웹 앱의 설치를 홍보하여 사용자가 홈 화면에 쉽게 추가할 수 있습니다. 커뮤니티에서는 PWA를 홈 화면에 설치한 사용자의 참여도가 높으며, 재방문 횟수, 앱에서 보낸 시간, 전환율(해당하는 경우)이 더 높다고 전했습니다.

미니 정보 표시줄 없이 웹 앱을 홍보하려면 beforeinstallprompt 이벤트를 수신 대기한 다음 이벤트를 저장하세요. 다음으로, 설치 버튼을 추가하거나, 설치 배너를 표시하거나, 피드 내 프로모션 또는 메뉴 옵션을 사용하여 PWA를 설치할 수 있음을 나타내도록 사용자 인터페이스를 업데이트합니다. 사용자가 설치 요소를 클릭하면 저장된 beforeinstallprompt 이벤트에서 prompt()를 호출하여 홈 화면에 추가 모달 대화상자를 표시합니다.

홈 화면에 추가 미니 정보 표시줄의 미래

홈 화면에 추가 정보 표시줄의 사용은 여전히 임시 조치입니다. Chrome은 프로그레시브 웹 앱 사용자에게 설치 기능을 계속 제공하면서 탐색 환경의 혼란을 줄이는 방식으로 새로운 UI 패턴을 실험하고 있습니다.