네이티브 앱 설치 프롬프트

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

기준은 무엇인가요?

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

  • 현재 기기에 설치된 웹 앱이나 네이티브 앱 둘 다 아님
  • 다음을 포함하는 웹 앱 매니페스트가 포함됩니다.
  • 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 이벤트가 실행될 때까지 기다려야 합니다. 확인할 수 있습니다.

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

사이트에 제한적인 콘텐츠 보안 정책이 있는 경우 img-src 지시어에 *.googleusercontent.com를 추가하여 Chrome이 Play 스토어에서 앱과 관련된 아이콘을 다운로드할 수 있습니다.

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