감지

사용자가 브라우저 또는 독립형 모드에서 PWA를 사용하는지 감지할 수 있습니다. Chromium 기반 브라우저 (Android 및 데스크톱)에서는 다음과 같은 이벤트도 감지할 수 있습니다.

• 설치 초대 대화상자 상태 및 결과
• 설치가 완료되었습니다.
• 브라우저에서 PWA 창으로 또는 그 반대로 탐색을 전송합니다.
• PWA 설치 상태
• 앱 스토어에서 설치된 관련 앱

이 데이터를 분석하여 사용자의 선호도를 이해하고 환경을 맞춤설정할 수 있습니다. 이러한 이벤트를 캡처하려면 미디어 쿼리와 같은 도구, window의 이벤트 또는 여기에 나열된 기능 API를 사용하면 됩니다.

디스플레이 모드 감지

사용자가 PWA를 실행하는 방식을 추적하려면 matchMedia()를 사용하여 display-mode 미디어 쿼리를 테스트하면 됩니다.

window.addEventListener('DOMContentLoaded', () => {
  let displayMode = 'browser tab';
  if (window.matchMedia('(display-mode: standalone)').matches) {
    displayMode = 'standalone';
  }
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', displayMode);
});

이 예를 사용하는 경우 웹 앱 매니페스트의 디스플레이 모드(예: standalone, minimal-ui, fullscreen)를 일치시켜야 합니다. 쉼표로 구분된 조건을 사용하여 미디어 쿼리 문자열에서 여러 쿼리를 일치시킬 수도 있습니다.

매니페스트의 start_url에 쿼리 매개변수를 추가하여 애널리틱스로 캡처하여 PWA가 언제, 어떤 방식으로, 얼마나 사용되는지에 관한 통계를 추적할 수도 있습니다.

주의: 측정항목을 캡처하기 위해 start_url에서 쿼리 매개변수를 사용하는 경우 매니페스트에서 id 필드를 설정하여 앱을 고유하게 식별해야 합니다. 웹 앱 매니페스트 ID 속성으로 PWA 고유 식별에서 이 필드를 설정하는 방법을 읽어보세요.

앱 설치

사용자가 브라우저에서 설치 메시지를 수락하면 Chromium 기반 브라우저에서 appinstalled 이벤트가 실행됩니다. 이 이벤트 핸들러는 추가한 인앱 설치 프로모션을 제거하는 것이 좋습니다.

window.addEventListener('appinstalled', () => {
  // If visible, hide the install promotion
  hideInAppInstallPromotion();
  // Log install to analytics
  console.log('INSTALL: Success');
});

WebAPK가 있는 Android 기기에서는 WebAPK가 만들어지고 설치된 이후가 아니라 사용자가 대화상자를 수락할 때 이벤트가 시작됩니다. 앱이 완전히 설치되기까지 몇 초 정도 지연될 수 있습니다.

설치 프롬프트 챕터에서는 설치 프롬프트를 사용할 수 있는지 확인하는 방법과 사용자가 어떤 선택을 할지 설명합니다.

경고: appinstalled 이벤트는 Chromium 기반 브라우저에서만 사용할 수 있으며 매니페스트 사양 인큐베이터의 일부입니다.

세션 이전

사용자는 브라우저 내에서 그리고 설치된 독립형 형태로 PWA를 사용할 수 있습니다. 데스크톱 브라우저에서는 다음 이미지와 같이 배지 또는 메뉴 항목을 사용하여 이러한 컨텍스트 간에 현재 탐색을 전송할 수 있습니다.

Android에는 탐색을 앱으로 전송하는 데스크톱 브라우저의 메뉴 항목과 유사한 메뉴 항목이 있습니다. 이 경우 현재 URL이 열리지만 앱에서는 새 페이지 탐색이 됩니다.

다음 이미지에서는 앱이 이미 설치된 상태에서 Android의 메뉴 항목을 볼 수 있습니다.

설치 후 전송

데스크톱 브라우저에서는 설치 시 현재 탐색이 앱으로 즉시 전송됩니다. 브라우저 탭이 닫히고 새로 설치된 앱이 열려 사용자가 하던 작업을 계속합니다.

모바일 브라우저에서는 앱을 설치할 때 현재 탐색이 브라우저에 유지됩니다. 사용자가 앱으로 이동하려면 앱을 수동으로 열어야 하며, 이 경우 새로운 탐색으로 표시됩니다.

전송 감지

브라우저와 창 간의 전송을 감지하려면 미디어 쿼리를 사용하면 됩니다.

window.addEventListener('DOMContentLoaded', () => {
  // replace standalone with your display used in manifest
  window.matchMedia('(display-mode: standalone)')
    .addEventListener('change', (evt) => {
      let displayMode = 'browser';
      if (evt.matches) {
        displayMode = 'standalone';
      }
      // Log display mode change to analytics
      console.log('DISPLAY_MODE_CHANGED', displayMode);
    });
});

iOS 및 iPadOS 저장소 격리

iOS 및 iPadOS에서는 브라우저와 설치된 아이콘 간에 탐색 또는 URL 전송이 없습니다. 동일한 PWA일지라도 사용자가 설치하는 모든 PWA 아이콘에는 Safari 탭 및 다른 아이콘과 격리된 자체 저장용량이 있습니다. 사용자가 설치된 아이콘을 열면 Safari와 스토리지가 공유되지 않습니다. PWA에 로그인이 필요한 경우 사용자가 다시 로그인해야 합니다. 앱이 홈 화면에 여러 번 추가된 경우 각 PWA 인스턴스마다 사용자의 세션이 다릅니다.

관련 애플리케이션

브라우저 지원

• x
• 79
• x
• x

소스

웹사이트는 매니페스트를 통해 앱과의 관계를 나타냅니다. 이렇게 하려면 웹 앱 매니페스트 사양의 related_applications 멤버를 사용하세요. related_applications 키는 각 관련 애플리케이션을 나타내는 객체의 배열입니다. 각 항목에는 platform, url, 선택적 id가 포함됩니다.

가능한 플랫폼 값은 다음과 같습니다.

• chrome_web_store: Chrome 웹 스토어입니다.
• play: Google Play 앱 (Android 및 ChromeOS)
• chromeos_play: ChromeOS Play입니다.
• webapp: 웹 앱입니다.
• windows: Microsoft Store (Windows 10 및 11)
• f-droid: F-droid.
• amazon: Amazon AppStore (FireOS)

관련 앱을 선호함

사용자가 앱을 설치할 때 매니페스트에서 prefer_related_applications 필드를 true로 설정하면 사용자를 관련 앱으로 리디렉션할 수 있습니다. 이 설정을 사용하면 호환되는 브라우저에서 설치 흐름이 PWA를 설치하지 않고 대신 related_applications 항목에 지정한 url 또는 id에서 스토어 설치를 트리거합니다.

관련 애플리케이션은 PWA일 수 있으며 앱 스토어를 통해 설치됩니다. 이 구성의 이점 중 하나는 현재 앱 스토어를 통해 설치된 앱만 백업을 통해 복구되거나 사용자가 새 기기로 전환할 때 복구된다는 점입니다.

{
  ...
  "related_applications:" [
     {
       "platform": "play",
       "url": "https://play.google.com/..."
     }
  ],
  "prefer_related_applications": true
}

참고: webapp 기본 애플리케이션에만 prefer_related_applications: true를 사용해도 PWA가 제공되고 설치되는 방식에는 큰 차이가 없습니다.

Apple Smart App 배너

Safari는 related_applications 멤버를 지원하지 않지만 App Store의 앱을 위한 스마트 앱 배너를 제공합니다. 따라서 PWA 또는 App Store에 게시한 다른 앱을 홍보하려는 경우 PWA의 HTML에 메타 태그를 포함하여 사용자가 앱을 설치하도록 초대하거나 (방금 제공된 링크 참조) 이미 설치된 경우 탐색을 전송할 수 있습니다.

설치된 관련 앱 감지

getInstalledRelatedApps() 메서드를 사용하면 웹사이트에서 iOS/Android/데스크톱 앱 또는 PWA가 사용자의 기기에 설치되어 있는지 확인할 수 있습니다.

관련 앱이 이미 설치되어 있는지 확인하면 범용 웹사이트로 이동하는 대신 맞춤 설치 메시지를 숨기거나 설치된 앱으로 사용자를 직접 리디렉션하는 등의 기능을 구현하는 데 도움이 됩니다. getInstalledRelatedApps() 메서드를 사용하려면 설치된 앱과 웹사이트 모두 서로 연결을 구성해야 합니다. 각 앱은 플랫폼에 따라 웹사이트 인식을 위한 메타데이터를 포함하며 웹사이트의 매니페스트 related_applications 필드에는 설치된 예상 앱이 포함됩니다.

PWA를 앱 스토어에 게시할 수 있는 BubbleWrap 또는 PWA Builder와 같은 도구는 웹사이트에서 getInstalledRelatedApps()를 바로 사용할 수 있도록 필요한 메타데이터를 이미 추가하고 있습니다. getInstalledRelatedApps()를 사용하여 PWA가 이미 설치되어 있는지 감지하려면 매니페스트 related_applications 필드에 매니페스트 URL로 webapp를 정의합니다.

...
"related_applications": [{
   "platform": "webapp",
   "url": "https://example.com/manifest.json",
}],
...

getInstalledRelatedApps()는 앱 객체의 배열을 반환합니다. 배열이 비어 있으면 관련 앱이 설치되지 않은 것입니다.

const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;

PWA 범위 밖에서 설치 감지

Android 89의 Chrome에서는 PWA가 설치된 범위 밖에서도 PWA가 설치되었는지 감지할 수 있습니다. 이 도움말에 설명된 대로 PWA는 /.well-known/ 폴더 내에 JSON 파일을 설정하여 다른 범위에 권한을 부여해야 합니다.

자료

• 앱이 설치되어 있나요? getInstalledRelatedApps()가 표시됩니다.
• MDN: 관련 애플리케이션
• MDN: AppInstalled 이벤트
• Apple: 스마트 앱 배너로 앱 홍보하기