이 결함에는 웹 매니페스트와 함께 웹 앱을 설치 가능하게 만드는 필수 입력란이 포함되어 있습니다.
또한 기본적으로 숨겨져 있는 설치 버튼도 있습니다.
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;
});
추가 자료
축하합니다. 이제 앱을 설치할 수 있습니다.
다음과 같은 작업을 할 수 있습니다.