설치 메시지

사용자는 PWA 설치 프로세스에 익숙하지 않을 수 있습니다. 개발자는 앱을 설치하도록 사용자를 초대해야 할 때가 언제인지 이해하게 됩니다. 기본 브라우저 설치 프롬프트도 개선할 수 있습니다. 사용할 수 있는 도구를 확인해 보겠습니다.

설치 대화상자 개선

PWA가 설치 기준을 통과하면 브라우저에서 기본 설치 메시지를 제공합니다. 브라우저는 웹 앱 매니페스트의 name 및 icons 속성을 사용하여 프롬프트를 빌드합니다.

Microsoft Edge 설치 프롬프트

일부 브라우저에서는 description, categories, screenshots 등 매니페스트의 프로모션 필드를 사용하여 설치 프롬프트 환경을 개선합니다. 예를 들어 Android에서 Chrome을 사용할 때 PWA에서 description 및 screenshots 필드의 값을 제공하면 설치 대화상자 환경이 작은 홈 화면에 추가 정보 표시줄에서 앱 스토어의 설치 프롬프트와 마찬가지로 더 크고 자세한 대화상자로 변환됩니다.

프로모션 필드의 작동 방식 보기:

beforeinstallprompt 이벤트

브라우저의 설치 메시지는 사용자가 PWA를 설치하도록 유도하는 첫 번째 단계입니다. 자체 설치 환경을 구현하려면 앱이 설치 기준을 전달해야 합니다. 브라우저에서 앱이 설치 가능하다고 감지하면 beforeinstallprompt 이벤트를 실행합니다. 사용자 환경을 맞춤설정하려면 이 이벤트 핸들러를 구현해야 합니다. 방법은 다음과 같습니다.

  1. beforeinstallprompt 이벤트를 수신합니다.
  2. 나중에 필요합니다. 저장합니다.
  3. UI에서 트리거합니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.

아래 코드에서 beforeinstallprompt 이벤트, 캡처, 이후 맞춤 사용을 위한 이벤트 리스너의 예를 확인하세요.

// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the default mini-infobar or install dialog from appearing on mobile
  e.preventDefault();
  // Save the event because you'll need to trigger it later.
  deferredPrompt = e;
  // Show your customized install prompt for your PWA
  // Your own UI doesn't have to be a single element, you
  // can have buttons in different locations, or wait to prompt
  // as part of a critical journey.
  showInAppInstallPromotion();
});

그런 다음 사용자가 맞춤설정된 설치 버튼을 클릭하면 이전에 저장된 deferredPrompt를 사용하고 prompt() 메서드를 호출합니다. 사용자는 여전히 브라우저의 프로세스를 진행하여 앱을 설치해야 하기 때문입니다. PWA를 설치하도록 장려하기 위해 사용자에게 적절한 컨텍스트를 제공할 때까지 이벤트를 지연시켰습니다.

이벤트를 캡처하면 사용자가 앱을 설치하도록 유도할 수 있는 힌트와 인센티브를 추가할 수 있으며, 사용자의 참여도가 더 높다는 것을 알고 있을 때 설치 요청 메시지를 표시하도록 선택할 수 있습니다.

다음과 같은 경우 이벤트가 실행되지 않습니다.

  • 사용자가 이미 현재 PWA를 설치했습니다 (Android의 데스크톱 및 WebAPK에만 유효).
  • 앱이 PWA 설치 기준을 통과하지 못합니다.
  • 다른 이유 (예: 키오스크 모드에 있거나 권한이 없는 기기)로 인해 현재 기기에 PWA를 설치할 수 없습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.

프롬프트 설계에 가장 적합한 곳

메시지가 표시되는 위치는 애플리케이션 및 사용자가 콘텐츠 및 서비스에 가장 많이 참여하는 시점에 따라 다릅니다. beforeinstallprompt를 캡처하면 사용자에게 앱을 계속 사용해야 하는 이유와 앱 설치를 통해 얻을 수 있는 이점을 안내할 수 있습니다. 앱의 어느 위치에나 설치 힌트를 표시하도록 선택할 수 있습니다. 일반적인 패턴으로는 사이드 메뉴, 주문 완료와 같은 중요한 사용자 여정 이후, 가입 페이지 등이 있습니다. 자세한 내용은 PWA 설치 촉진 패턴을 참고하세요.

분석 정보 수집

분석을 사용하면 프롬프트를 언제, 어디에, 제시할지 더 잘 이해할 수 있습니다. beforeinstallprompt 이벤트의 userChoice 속성을 사용할 수 있습니다. userChoice는 사용자가 실행한 작업으로 확인되는 프로미스입니다.

// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
  deferredPrompt.prompt();
  // Find out whether the user confirmed the installation or not
  const { outcome } = await deferredPrompt.userChoice;
  // The deferredPrompt can only be used once.
  deferredPrompt = null;
  // Act on the user's choice
  if (outcome === 'accepted') {
    console.log('User accepted the install prompt.');
  } else if (outcome === 'dismissed') {
    console.log('User dismissed the install prompt');
  }
});
드림

실제 사례 보기

Chromium 브라우저 (데스크톱 또는 Android)에서 다음 샘플을 실제로 사용해 보세요.

대체

브라우저에서 beforeinstallprompt를 지원하지 않거나 이벤트가 실행되지 않는 경우 브라우저의 설치 메시지를 트리거할 수 있는 다른 방법이 없습니다. 그러나 iOS와 같이 사용자가 PWA를 수동으로 설치할 수 있는 플랫폼에서는 사용자에게 이러한 안내를 표시할 수 있습니다.

이 안내는 브라우저 모드에서만 렌더링해야 합니다. standalone 또는 fullscreen와 같은 다른 표시 옵션은 사용자가 이미 앱을 설치했음을 의미합니다.

브라우저 모드에서만 요소를 렌더링하려면 display-mode 미디어 쿼리를 사용합니다.

#installInstructions {
   display: none
}
@media (display-mode: browser) {
   #installInstructions {
     display: block
   }
}

Codelab

라이브러리

맞춤 설치 프롬프트를 렌더링하는 데 도움이 되는 다음 라이브러리를 확인하세요.

리소스