이 글리치에는 웹 앱을 설치 가능하게 만드는 데 필요한 필드가 포함된 웹 매니페스트가 있습니다.
기본적으로 숨겨져 있는 설치 버튼도 있습니다.
beforeinstallprompt 이벤트 수신
브라우저에서 beforeinstallprompt
이벤트를 실행하면 웹 앱을 설치할 수 있고 사용자에게 설치 버튼을 표시할 수 있음을 나타냅니다. beforeinstallprompt
이벤트는 앱이 설치 가능성 기준을 충족할 때 실행됩니다.
개발자는 이벤트를 캡처하여 설치를 맞춤설정하고 적절한 때라고 생각될 때 사용자에게 설치를 요청할 수 있습니다.
- 리믹스하여 수정을 클릭하여 프로젝트를 수정할 수 있도록 합니다.
window
객체에beforeinstallprompt
이벤트 핸들러를 추가합니다.event
를 전역 변수로 저장합니다. 나중에 프롬프트를 표시하는 데 필요합니다.- 설치 버튼을 숨기지 않습니다.
코드:
window.addEventListener('beforeinstallprompt', (event) => {
// Prevent the mini-infobar from appearing on mobile.
event.preventDefault();
console.log('👍', 'beforeinstallprompt', event);
// Stash the event so it can be triggered later.
window.deferredPrompt = event;
// Remove the 'hidden' class from the install button container.
divInstall.classList.toggle('hidden', false);
});
설치 버튼 클릭 처리
설치 메시지를 표시하려면 저장된 beforeinstallprompt
이벤트에서 prompt()
를 호출합니다. prompt()
는 사용자 동작에서 호출되어야 하므로 설치 버튼 클릭 핸들러에서 prompt()
를 호출합니다.
- 설치 버튼의 클릭 이벤트 핸들러를 추가합니다.
- 저장된
beforeinstallprompt
이벤트에서prompt()
를 호출합니다. - 프롬프트의 결과를 기록합니다.
- 저장된
beforeinstallprompt
이벤트를 null로 설정합니다. - 설치 버튼을 숨깁니다.
코드:
butInstall.addEventListener('click', async () => {
console.log('👍', 'butInstall-clicked');
const promptEvent = window.deferredPrompt;
if (!promptEvent) {
// The deferred prompt isn't available.
return;
}
// Show the install prompt.
promptEvent.prompt();
// Log the result
const result = await promptEvent.userChoice;
console.log('👍', 'userChoice', result);
// Reset the deferred prompt variable, since
// prompt() can only be called once.
window.deferredPrompt = null;
// Hide the install button.
divInstall.classList.toggle('hidden', true);
});
설치 이벤트 추적
설치 버튼을 통해 웹 앱을 설치하는 것은 사용자가 앱을 설치하는 방법 중 하나일 뿐입니다. Chrome의 메뉴, 미니 정보 표시줄, 검색주소창의 아이콘을 통해서도 설정을 사용할 수 있습니다. appinstalled
이벤트를 수신하여 이러한 모든 설치 방법을 추적할 수 있습니다.
window
객체에appinstalled
이벤트 핸들러를 추가합니다.- 애널리틱스 또는 기타 메커니즘에 설치 이벤트를 기록합니다.
코드:
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
추가 자료
축하합니다. 이제 앱을 설치할 수 있습니다.
다음과 같은 작업을 추가로 수행할 수 있습니다.