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

Penny McLachlan
Penny McLachlan

프로그레시브 웹 앱 및 미니 정보 바에 대한 배경 정보

프로그레시브 웹 앱 (PWA)은 앱처럼 즉시 로드되며 안정적이고 설치 가능한 웹사이트를 만들기 위한 패턴입니다.

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

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

Chrome 76 변경사항

우리는 커뮤니티의 의견을 경청해 왔으며, 개발자가 사용자에게 PWA 설치를 요청할 시기를 더 세밀하게 관리하고 싶다는 의견을 받았습니다. YouTube는 여러분의 의견을 소중히 생각하기에

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

beforeinstallprompt 이벤트를 사용하면 프로그레시브 웹 앱의 설치를 촉진하여 사용자가 홈 화면에 쉽게 추가할 수 있습니다. Google 커뮤니티에서 홈 화면에 PWA를 설치하는 사용자의 참여도가 높으면 재방문 및 앱 사용 시간이 더 많고 적용 가능한 경우 전환율이 더 높다는 사실을 발견했습니다.

PWA의 설치 가능성을 높이기 위해 설치 배너를 사용하는 Pinterest의 예
PWA의 설치 가능성을 높이기 위해 설치 배너를 사용하는 Pinterest의 예 코드 샘플 및 기타 권장사항을 포함하여 홈 화면에 추가 흐름에 관한 자세한 내용은 홈 화면에 추가를 참고하세요.

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

Future of the 홈 화면에 추가 미니 정보 표시줄

'홈 화면에 추가' 정보 표시줄을 사용하는 것은 여전히 일시적인 조치입니다. Google에서는 Progressive Web App 사용자가 설치할 수 있도록 하는 새로운 UI 패턴을 실험하고 있으며, 이는 탐색 환경의 혼잡성을 줄이는 방식입니다.