홈 화면에 추가 배너를 처음 출시한 이후 Google은 프로그레시브 웹 앱에 더 명확한 라벨을 지정하고 사용자가 앱을 설치하는 방법을 간소화하기 위해 노력해 왔습니다. Google의 최종 목표는 모든 플랫폼의 omnibox에 설치 버튼을 제공하는 것이며, Chrome 68에서는 이 목표를 향해 변경사항을 적용하고 있습니다.
변경사항
Android의 Chrome 68부터 (2018년 7월 안정화 버전) Chrome에 더 이상 홈 화면에 추가 배너가 표시되지 않습니다. 사이트가 홈 화면에 추가 기준을 충족하면 Chrome에 미니 정보 표시줄이 표시됩니다. 그런 다음 사용자가 미니 정보 표시줄을 클릭하거나 개발자가 사용자 동작 내에서 beforeinstallprompt 이벤트에서 prompt()를 호출하면 Chrome에 '홈 화면에 추가' 모달 대화상자가 표시됩니다.
A2HS 배너 Chrome 67 이하
사이트가 홈 화면에 추가 기준을 충족하고 사이트가 beforeinstallprompt 이벤트에서 preventDefault()를 호출하지 않는 경우 자동으로 표시됩니다.
또는
beforeinstallprompt 이벤트에서 prompt()를 호출하여 표시됩니다.
미니 정보 표시줄 Chrome 68 이상
사용자가 닫으면 충분한 시간이 지나야 (최대 3개월) 다시 표시됩니다.
beforeinstallprompt 이벤트에서 preventDefault()가 호출되었는지와 관계없이 표시됩니다.
이 UI 처리는 향후 Chrome 버전에서 omnibox 설치 버튼이 도입되면 삭제됩니다.
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이벤트 세부정보- 홈 화면 추가 메시지에 대한 사용자 응답 추적
- 앱이 설치되었는지 추적
- 앱이 설치된 앱으로 실행 중인지 확인