네이티브 앱 설치 메시지를 사용하면 사용자가 브라우저를 벗어나지 않고도, 성가신 전면 광고를 표시하지 않고도 앱 스토어에서 직접 기기에 네이티브 앱을 빠르고 원활하게 설치할 수 있습니다.
기준은 무엇인가요?
사용자에게 네이티브 앱 설치 메시지가 표시되도록 하려면 사이트에서 다음을 충족해야 합니다. 다음 기준을 충족해야 합니다.
- 현재 기기에 설치된 웹 앱이나 네이티브 앱 둘 다 아님
- 다음을 포함하는 웹 앱 매니페스트가 포함됩니다.
short_name
name
(배너 프롬프트에 사용)icons
(192px 및 512px 버전 포함)prefer_related_applications
은true
입니다.- 정보가 포함된
related_applications
객체 앱 정보
- HTTPS를 통해 게재됨
이 기준을 충족하면 beforeinstallprompt
이벤트가 실행됩니다. 나
사용자에게 네이티브 앱을 설치하라는 메시지를 표시할 수 있습니다.
필수 매니페스트 속성
사용자에게 네이티브 앱을 설치하라는 메시지를 표시하려면 웹 앱 매니페스트에 두 가지 속성인 prefer_related_applications
및 related_applications
를 추가해야 합니다.
"prefer_related_applications": true,
"related_applications": [
{
"platform": "play",
"id": "com.google.samples.apps.iosched"
}
]
prefer_related_applications
prefer_related_applications
속성은
웹 앱 대신 네이티브 앱으로 사용자를 연결할 수 있습니다. 이 값을 설정하지 않으면
또는 false
일 경우 브라우저에서 사용자에게 웹 앱을 대신 설치하라는 메시지를 표시합니다.
related_applications
related_applications
는
원하는 네이티브 애플리케이션에 대한 정보를
생각해 보세요 각 객체에는 platform
속성과 id
속성이 포함되어야 합니다. 여기서 platform
이 play
인 경우
id
는 Play 스토어 앱 ID입니다.
설치 메시지 표시
설치 대화상자를 표시하려면 다음을 실행해야 합니다.
beforeinstallprompt
이벤트를 수신 대기합니다.- 버튼 등을 사용하여 네이티브 앱을 설치할 수 있음을 사용자에게 알립니다. 요소를 생성합니다.
- 저장된
beforeinstallprompt
에서prompt()
를 호출하여 메시지를 표시합니다. 이벤트를 처리합니다.
beforeinstallprompt
듣기
기준이 충족되면 Chrome에서 beforeinstallprompt
을 실행합니다.
이벤트를 처리합니다. 이를 사용하여 앱을 설치할 수 있음을 나타낸 다음 사용자에게 설치하라는 메시지를 표시할 수 있습니다.
beforeinstallprompt
이벤트가 실행되면 이벤트 참조를 저장합니다.
사용자가 앱을 설치할 수 있음을 나타내도록 사용자 인터페이스를 업데이트하세요.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
});
사용자에게 앱을 설치할 수 있다고 알림
사용자에게 앱을 설치할 수 있다고 알리는 가장 좋은 방법은 사용자 인터페이스에 버튼이나 기타 요소를 추가하는 것입니다. 전체 페이지 전면 광고 또는 성가시거나 방해가 될 수 있는 기타 요소를 표시하지 마세요.
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can add to home screen
btnAdd.style.display = 'block';
});
메시지 표시
설치 메시지를 표시하려면 사용자 동작 내에서 저장된 이벤트에서 prompt()
를 호출합니다. 사용자에게 앱을 홈 화면에 추가하라는 모달 대화상자가 표시됩니다.
그런 다음 userChoice
속성에서 반환된 프로미스를 수신 대기합니다. 프롬프트가 표시되고 사용자가 응답한 후 프로미스는 outcome
속성이 있는 객체를 반환합니다.
btnAdd.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
btnAdd.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
지연된 이벤트에서는 prompt()
를 한 번만 호출할 수 있습니다. 사용자가 닫는 경우
beforeinstallprompt
이벤트가 실행될 때까지 기다려야 합니다.
확인할 수 있습니다.
콘텐츠 보안 정책 사용 시 특별히 고려해야 할 사항
사이트에 제한적인 콘텐츠 보안 정책이 있는 경우
img-src
지시어에 *.googleusercontent.com
를 추가하여 Chrome이
Play 스토어에서 앱과 관련된 아이콘을 다운로드할 수 있습니다.
경우에 따라 *.googleusercontent.com
가 원하는 것보다 더 상세할 수 있습니다. Android 기기를 원격 디버깅하여 앱 아이콘의 URL을 확인하여 이를 좁힐 수 있습니다.