Google은 '홈 화면에 추가' 배너를 처음 출시한 이후 프로그레시브 웹 앱에 더욱 명확하게 라벨을 지정하고 사용자가 앱을 설치하는 방법을 간소화하기 위해 노력해 왔습니다. Google의 궁극적인 목표는 모든 플랫폼에서 검색주소창에 설치 버튼을 제공하는 것이며, Chrome 68에서는 이 목표를 향한 변경 작업을 진행 중입니다.
변경사항
Android의 Chrome 68 (2018년 7월 공개 버전)부터는 Chrome에 '홈 화면에 추가' 배너가 더 이상 표시되지 않습니다. 사이트가 홈 화면에 추가 기준을 충족하면 Chrome은 미니 정보 표시줄을 표시합니다. 그런 다음 사용자가 미니 정보 표시줄을 클릭하거나 사용자 동작 내에서 beforeinstallprompt 이벤트에서 prompt()를 호출하면 Chrome은 모달 화면에 추가 대화상자를 표시합니다.
A2HS 배너 Chrome 67 이하
사이트가 홈 화면에 추가 기준을 충족하고 beforeinstallprompt 이벤트에서 preventDefault()를 호출하지 않으면 자동으로 표시됩니다.
또는
beforeinstallprompt 이벤트에서 prompt()를 호출하여 표시됩니다.
Mini-infobar Chrome 68 이상
사용자가 닫으면 충분한 기간 (최대 3개월)이 지날 때까지 표시되지 않습니다.
preventDefault()가 beforeinstallprompt 이벤트에서 호출되었는지와 관계없이 표시됩니다.
이러한 UI 처리는 검색주소창 설치 버튼이 도입되면 향후 Chrome 버전에서 삭제될 예정입니다.
A2HS 대화상자
Chrome 68 이상에서 beforeinstallprompt 이벤트 시 사용자 동작 내에서 prompt()를 호출하여 표시됩니다.
또는
Chrome 68 이상에서 사용자가 미니 정보 표시줄을 탭할 때 표시됩니다.
또는
사용자가 모든 Chrome 버전의 Chrome 메뉴에서 '홈 화면에 추가'를 클릭하면 표시됩니다.
미니 정보 표시줄
미니 정보 표시줄은 Chrome UI 구성요소이며 사이트에서 제어할 수 없지만 사용자가 쉽게 닫을 수 있습니다. 사용자가 닫으면 충분한 시간(현재 3개월)이 경과할 때까지 앱이 다시 표시되지 않습니다. 미니 정보 표시줄은 beforeinstallprompt 이벤트에서 preventDefault()했는지 여부와 관계없이 사이트가 홈 화면에 추가 기준을 충족하면 표시됩니다.
페이지 로드 시 사용자에게 메시지를 표시하는 대신 (권한 요청의 피해야 할 패턴) 앱을 일부 UI로 설치할 수 있음을 나타낼 수 있습니다. 그러면 모달 설치 메시지가 표시됩니다. 예를 들어 이 데스크톱 PWA는 사용자의 프로필 이름 바로 위에 '앱 설치' 버튼을 추가합니다.
사용자 동작 시 앱을 설치하라는 메시지를 표시하면 사용자에게 스팸성이 적고 사용자가 '취소' 대신 '추가'를 클릭할 가능성이 높아집니다. 설치 버튼을 앱에 통합하면 사용자가 오늘 앱을 설치하지 않기로 선택하더라도 내일 또는 설치할 준비가 될 때마다 버튼이 계속 표시됩니다.
beforeinstallprompt 이벤트 리슨
사이트가 홈 화면에 추가 기준을 충족하면 Chrome에서 beforeinstallprompt 이벤트를 실행하고 이벤트 참조를 저장하며 사용자 인터페이스를 업데이트하여 사용자가 홈 화면에 앱을 추가할 수 있음을 나타냅니다.
let installPromptEvent;
window.addEventListener('beforeinstallprompt', event => {
// Prevent Chrome <= 67 from automatically showing the prompt
event.preventDefault();
// Stash the event so it can be triggered later.
installPromptEvent = event;
// Update the install UI to notify the user app can be installed
document.querySelector('#install-button').disabled = false;
});
앱이 이미 설치되어 있으면 beforeinstallprompt 이벤트가 실행되지 않습니다 (홈 화면에 추가 기준 참고).
그러나 사용자가 나중에 앱을 제거하면 각 페이지 탐색에서 beforeinstallprompt 이벤트가 다시 발생합니다.
prompt()로 대화상자 표시
홈 화면에 추가 대화상자를 표시하려면 사용자 동작 내에서 저장된 이벤트에서 prompt()를 호출합니다. Chrome은 모달 대화상자를 표시하여 사용자에게 홈 화면에 앱을 추가하라는 메시지를 표시합니다. 그런 다음 beforeinstallprompt 이벤트의 userChoice 속성에서 반환한 프로미스를 수신 대기합니다. 프로미스는 프롬프트가 표시되고 사용자가 응답한 후 outcome 속성이 있는 객체를 반환합니다.
btnInstall.addEventListener('click', () => {
// Update the install UI to remove the install button
document.querySelector('#install-button').disabled = true;
// Show the modal add to home screen dialog
installPromptEvent.prompt();
// Wait for the user to respond to the prompt
installPromptEvent.userChoice.then(choice => {
if (choice.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
// Clear the saved prompt since it can't be used again
installPromptEvent = null;
});
});
지연된 이벤트에서 prompt()는 한 번만 호출할 수 있습니다. 사용자가 대화상자에서 취소를 클릭하면 다음 페이지 탐색에서 beforeinstallprompt 이벤트가 실행될 때까지 기다려야 합니다. 기존 권한 요청과 달리 '취소'를 클릭해도 향후 prompt() 호출이 차단되지 않습니다. 호출은 사용자 동작 내에서 호출되어야 하기 때문입니다.
추가 리소스
다음을 포함한 자세한 내용은 앱 설치 배너를 참조하세요.
beforeinstallprompt일정 세부정보- 홈 화면 추가 메시지에 대한 사용자 응답 추적
- 앱 설치 추적
- 앱이 설치된 앱으로 실행되는지 확인