나만의 인앱 설치 환경을 제공하는 방법

Pete LePage

대다수의 브라우저에서는 웹 브라우저 설치 시 프로그레시브 웹 앱 (PWA)을 바로 그 사용자 인터페이스 내에 통합할 수 있습니다. 설치 (이전 명칭: '홈 화면에 추가')를 통해 사용자는 PWA에 관해 자세히 알아보세요. PWA를 설치하면 사용자의 런처에 추가되므로 다른 설치된 앱과 마찬가지로 실행할 수 있습니다.

브라우저 제공 설치 환경 외에도 앱 내에서 직접 맞춤 설치 흐름을 제공할 수 있습니다.

'앱 설치' 버튼을 클릭합니다.

설치 홍보 여부를 결정할 때는 사용자가 일반적으로 PWA를 사용하세요. 예를 들어 PWA를 여러 개 사용하는 사용자 집합이 있는 경우 이러한 사용자들은 휴대전화 홈 화면이나 데스크톱의 시작 메뉴에서 앱 실행 실행할 수 있습니다 또한 일부 생산성 및 엔터테인먼트 애플리케이션은 브라우저 툴바를 제거하면 생성된 여분의 화면 공간이 설치된 standalone, minimal-ui 또는 window-control-overlay 모드의 창

기본 요건

시작하기 전에 PWA가 설치 가능 요구사항. 일반적으로 웹 앱 매니페스트를 포함해야 합니다

설치 유도

프로그레시브 웹 앱을 설치할 수 있음을 표시하고 맞춤 인앱 설치 흐름을 제공하려면 다음 단계를 따르세요.

1. beforeinstallprompt 이벤트를 수신 대기합니다.
2. 나중에 설치 흐름을 트리거할 수 있도록 beforeinstallprompt 이벤트를 저장합니다.
3. 사용자에게 PWA를 설치할 수 있다고 알리고 요소를 사용하여 인앱 설치 흐름을 시작합니다.

참고: beforeinstallprompt 이벤트와 appinstalled 이벤트가 웹 앱 매니페스트 사양에서 자체 인큐베이터로 이동했습니다. Chrome팀은 이러한 버전을 계속 지원할 것이며 지원을 삭제하거나 지원 중단할 계획은 없습니다. Google의 웹 DevRel팀은 맞춤설정된 설치 환경을 제공하기 위해 계속해서 이를 사용하는 것이 좋습니다.

beforeinstallprompt 이벤트 수신 대기

프로그레시브 웹 앱이 필수 설치 기준을 충족하는 경우 브라우저가 beforeinstallprompt 이벤트를 실행합니다. 이벤트에 대한 참조를 저장합니다. 사용자가 PWA를 설치할 수 있음을 나타내도록 사용자 인터페이스를 업데이트합니다.

// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
  // Optionally, send analytics event that PWA install promo was shown.
  console.log(`'beforeinstallprompt' event was fired.`);
});

참고: 사용할 수 있는 패턴은 사용자에게 앱을 설치할 수 있음을 알리고 인앱 상품 및 서비스를 제공하는 데 설치해야 합니다 여기에는 헤더의 버튼, 탐색 메뉴의 항목 또는 콘텐츠 피드의 항목이 포함될 수 있습니다.

인앱 설치 흐름

인앱 설치를 제공하려면 사용자가 클릭하거나 탭하여 앱을 설치할 수 있는 버튼이나 기타 인터페이스 요소를 제공합니다. 요소가 클릭되거나 탭되면 저장된 beforeinstallprompt 이벤트(deferredPrompt 변수에 저장됨)에서 prompt()를 호출합니다. 사용자에게 다음과 같은 모달 설치 대화상자를 표시합니다. PWA를 설치할 것인지 확인합니다.

buttonInstall.addEventListener('click', async () => {
  // Hide the app provided install promotion
  hideInstallPromotion();
  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  const { outcome } = await deferredPrompt.userChoice;
  // Optionally, send analytics event with outcome of user choice
  console.log(`User response to the install prompt: ${outcome}`);
  // We've used the prompt and can't use it again, throw it away
  deferredPrompt = null;
});

userChoice 속성은 사용자의 선택으로 확인되는 약속입니다. 지연된 이벤트에서 prompt()는 한 번만 호출할 수 있습니다. 사용자가 닫으면 beforeinstallprompt 이벤트가 다시 실행될 때까지(일반적으로 userChoice 속성이 확인된 직후) 기다려야 합니다.

해보기: beforeinstallprompt 이벤트를 사용하여 설치 가능한 사이트 만들기

PWA가 성공적으로 설치된 시점을 감지합니다.

userChoice 속성을 사용하여 사용자가 앱에 직접 액세스할 수 있습니다. 하지만 사용자가 주소 표시줄이나 다른 브라우저 구성요소에서 PWA를 설치하는 경우에는 userChoice가 도움이 되지 않습니다. 대신 매번 실행되는 appinstalled 이벤트를 수신 대기해야 합니다. PWA를 설치하는 데 어떤 메커니즘이 사용되든 관계없이 설치됩니다.

window.addEventListener('appinstalled', () => {
  // Hide the app-provided install promotion
  hideInstallPromotion();
  // Clear the deferredPrompt so it can be garbage collected
  deferredPrompt = null;
  // Optionally, send analytics event to indicate successful install
  console.log('PWA was installed');
});

PWA가 실행된 방법 감지

CSS display-mode 미디어 쿼리는 브라우저 탭에서 또는 설치된 PWA로 PWA가 실행된 방식을 나타냅니다. 이렇게 하면 앱이 실행된 방식에 따라 다양한 스타일을 적용할 수 있습니다. 예를 들어 를 사용하여 설치 버튼을 항상 숨기고 앱으로 시작할 때 뒤로 버튼을 제공합니다. PWA를 설치해야 합니다.

PWA가 실행된 방식 추적

사용자가 PWA를 실행하는 방법을 추적하려면 matchMedia()를 사용하여 display-mode 미디어 쿼리

function getPWADisplayMode() {
  if (document.referrer.startsWith('android-app://'))
    return 'twa';
  if (window.matchMedia('(display-mode: browser)').matches)
    return 'browser';
  if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone)
    return 'standalone';
  if (window.matchMedia('(display-mode: minimal-ui)').matches)
    return 'minimal-ui';
  if (window.matchMedia('(display-mode: fullscreen)').matches)
    return 'fullscreen';
  if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
    return 'window-controls-overlay';

  return 'unknown';
}

디스플레이 모드 변경 추적

사용자가 browser와 다른 디스플레이 모드 간에 전환하는지 추적하려면 display-mode 미디어 쿼리의 변경사항을 리슨합니다.

// Replace "standalone" with the display mode used in your manifest
window.matchMedia('(display-mode: standalone)').addEventListener('change', () => {
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
});

현재 디스플레이 모드에 따라 UI 업데이트

설치된 앱으로 실행될 때 PWA에 다른 배경 색상을 적용하는 방법 PWA에서는 조건부 CSS를 사용합니다.

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

앱의 아이콘 및 이름 업데이트

앱 이름을 업데이트하거나 새 아이콘을 제공해야 하는 경우 어떻게 해야 하나요? Chrome에서 웹 앱 매니페스트 업데이트를 처리하는 방법을 확인하세요. 변경사항이 언제 어떻게 Chrome에 반영되는지 확인할 수 있습니다.