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개월 이내)이 지날 때까지 표시되지 않습니다.
beforeinstallprompt 이벤트에서 preventDefault()가 호출되었는지와 관계없이 표시됩니다.
이러한 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이벤트 세부정보- 홈 화면 추가 메시지에 대한 사용자 응답 추적
- 앱 설치 여부 추적
- 앱이 설치된 앱으로 실행되는지 확인