네이티브 앱 설치 프롬프트

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

기준은 무엇인가요?

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

이러한 기준을 충족하면 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을 확인하는 방법으로 이 범위를 좁힐 수 있습니다.