네이티브 앱 설치 프롬프트

네이티브 앱 설치 메시지를 사용하면 사용자가 브라우저를 벗어나지 않고 성가신 전면 광고를 표시하지 않고도 앱 스토어에서 직접 기기에 네이티브 앱을 빠르고 원활하게 설치할 수 있습니다.

기준은 무엇인가요?

사용자에게 네이티브 앱 설치 메시지를 표시하려면 사이트가 다음 기준을 충족해야 합니다.

  • 현재 기기에 설치된 웹 앱 또는 네이티브 앱이 아닙니다.
  • 다음을 포함하는 웹 앱 매니페스트가 포함됩니다.
  • HTTPS를 통해 게재됨

이 기준을 충족하면 beforeinstallprompt 이벤트가 실행됩니다. 이를 사용하여 사용자에게 네이티브 앱을 설치하라는 메시지를 표시할 수 있습니다.

필수 매니페스트 속성

사용자에게 네이티브 앱을 설치하라는 메시지를 표시하려면 웹 앱 매니페스트에 두 가지 속성인 prefer_related_applications 및 related_applications를 추가해야 합니다.

"prefer_related_applications": true,
"related_applications": [
    {
    "platform": "play",
    "id": "com.google.samples.apps.iosched"
    }
]

prefer_related_applications 속성은 브라우저에 웹 앱 대신 네이티브 앱을 사용자에게 표시하라고 지시합니다. 이 값을 설정하지 않거나 false로 두면 브라우저에서 사용자에게 웹 앱을 대신 설치하라는 메시지를 표시합니다.

related_applications는 브라우저에 선호하는 네이티브 애플리케이션에 관해 알려주는 객체 목록이 포함된 배열입니다. 각 객체에는 platform 속성과 id 속성이 포함되어야 합니다. 여기서 platform는 play이고 id는 Play 스토어 앱 ID입니다.

설치 메시지 표시

설치 대화상자를 표시하려면 다음을 실행해야 합니다.

  1. beforeinstallprompt 이벤트를 수신 대기합니다.
  2. 사용자 동작 이벤트를 생성하는 버튼이나 기타 요소를 사용하여 네이티브 앱을 설치할 수 있음을 사용자에게 알립니다.
  3. 저장된 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 이벤트가 실행될 때까지 기다려야 합니다.

콘텐츠 보안 정책 사용 시 특별히 고려해야 할 사항

사이트에 제한적인 콘텐츠 보안 정책이 있는 경우 Chrome에서 Play 스토어에서 앱과 연결된 아이콘을 다운로드할 수 있도록 img-src 디렉티브에 *.googleusercontent.com를 추가해야 합니다.

경우에 따라 *.googleusercontent.com가 원하는 것보다 더 상세할 수 있습니다. Android 기기를 원격 디버깅하여 앱 아이콘의 URL을 확인하여 이를 좁힐 수 있습니다.