설치 메시지

사용자가 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를 지원하지 않거나 이벤트가 실행되지 않는 경우 브라우저의 설치 메시지를 트리거할 수 있는 다른 방법이 없습니다. 그러나 사용자가 PWA를 수동으로 설치할 수 있는 플랫폼(예: iOS)에서는 이러한 안내를 사용자에게 표시할 수 있습니다.

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

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

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

Codelab

라이브러리

맞춤 설치 메시지를 렌더링하는 데 도움이 필요한 경우 다음 라이브러리를 확인하세요.

자료