Google은 홈 화면에 추가 배너를 처음 출시한 이후로 프로그레시브 웹 앱에 더 명확한 라벨을 지정하고 사용자가 앱을 설치하는 방식을 간소화하기 위해 노력해 왔습니다. 궁극적인 목표는 모든 플랫폼의 옴니박스에 설치 버튼을 제공하는 것이며, 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 버전에서 삭제됩니다.
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이벤트에 관한 세부정보- 홈 화면 추가 메시지에 대한 사용자의 응답 추적
- 앱이 설치되었는지 추적
- 앱이 설치된 앱으로 실행되는지 확인