앱이 설치되어 있나요? Get Installed Related Apps API를 사용하면 알 수 있습니다.

Pete LePage

Alexey Rodionov

Get Installed Related Apps API를 사용하면 설치된 관련 앱 목록과 세부정보를 가져올 수 있습니다.

이 API를 사용하면 PWA 자체와 관련 웹페이지 (예: 제품 마케팅 웹사이트)에서 현재 기기에 프로그레시브 웹 앱 (PWA), Android 앱 또는 Universal Windows Platform (UWP) 앱이 설치되어 있는지 확인할 수 있습니다.

참고: 네이티브 Android 앱 또는 Universal Windows Platform (UWP) 앱뿐만 아니라 Bubblewrap 및 PWABuilder를 사용하여 패키징된 PWA도 포함될 수 있습니다.

Bubblewrap은 Node.js용 오픈소스 라이브러리 소스 세트이자 명령줄 도구 (CLI)입니다. Bubblewrap은 개발자가 PWA를 신뢰할 수 있는 웹 활동 (TWA)으로 실행하는 Android 프로젝트를 생성, 빌드, 서명할 수 있도록 Google Chrome팀에서 개발했습니다.

PWABuilder는 개발자가 PWA의 URL을 입력하고 앱의 메타데이터를 입력/수정하고 '생성' 버튼을 클릭하여 Microsoft Store, Google Play 스토어, App Store, Meta Quest Store를 비롯한 다양한 스토어에 게시할 수 있도록 PWA를 패키징하고 서명할 수 있는 오픈소스 프로젝트입니다.

PWABuilder는 백그라운드에서 Bubblewrap을 사용하여 Android 및 ChromeOS용 PWA를 패키징합니다.

앱이 이미 설치되어 있는 경우 사용자 환경을 맞춤설정할 수 있습니다.

예를 들면 다음과 같습니다.

다른 앱이 이미 설치되어 있는 경우 PWA 설치를 홍보하지 않습니다.
제품 마케팅 웹사이트에서 앱으로 사용자를 직접 리디렉션합니다.
중복된 알림을 방지하기 위해 다른 앱의 알림과 같은 일부 기능을 중앙 집중화합니다.

Get Installed Related Apps API란 무엇인가요?

비동기 navigator.getInstalledRelatedApps() 메서드를 호출하면 다음과 같은 앱에 관한 세부정보가 포함된 객체 배열로 확인되는 프로미스가 반환됩니다.

현재 기기에 설치됨
웹 앱 매니페스트의 related_applications 필드에 정의됨
navigator.getInstalledRelatedApps() 메서드가 호출되는 페이지와 확인된 관계가 있음 (자세한 내용은 다음 섹션 참고)

const installedRelatedApps = await navigator.getInstalledRelatedApps?.();

console.log(installedRelatedApps)를 호출하면 다음과 같은 내용이 반환됩니다.

[
  {
    platform: "webapp",
    id: "https://example.com/?utm_source=home_screen",
    url: "https://example.com/manifest.json"
  },
  {
    platform: "play",
    id: "com.example.twa",
    url: "https://play.google.com/store/apps/details?id=com.example.twa",
    version: "0.1.0"
  }
]

예를 들어 관련 앱이 사용자 기기에 설치되어 있는지 확인하려면 다음 한 줄 코드를 사용하면 됩니다.

const hasInstalledRelatedApps = !!(await navigator.getInstalledRelatedApps?.())?.length;

패키지 ID를 알고 있는 경우 설치된 관련 Android 앱의 버전 번호를 가져오려면 다음 한 줄 코드를 사용하면 됩니다.

const installedRelatedAndroidAppVersion = (await navigator.getInstalledRelatedApps?.())?.find(app => app.id === 'com.example.twa')?.version;

확인할 수 있는 지원되는 앱 유형

앱 유형	확인 가능 위치
Android 앱	Android 전용: Chrome 80 이상
Universal Windows Platform (UWP) 앱	Windows 전용: Chrome 85 이상 Edge 85 이상
동일한 출처의 동일한 범위에 설치된 프로그레시브 웹 앱 (PWA)	Android: Chrome 84 이상 데스크톱 (Windows, macOS, Linux, ChromeOS): Chrome 140 이상 Edge 140 이상
동일하거나 다른 출처의 다른 범위에 설치된 프로그레시브 웹 앱 (PWA)	Android 전용: Chrome 84 이상

Android 앱이 설치되어 있는지 확인

웹사이트에서 Android 앱이 설치되어 있는지 확인할 수 있습니다.

지원 플랫폼:

Android 전용: Chrome 80 이상

웹사이트에 관해 Android 앱에 알리기

먼저 디지털 애셋 링크 시스템을 사용하여 웹사이트와 Android 애플리케이션 간의 확인된 관계를 정의하도록 Android 앱을 업데이트해야 합니다. 이렇게 하면 웹사이트만 Android 앱이 설치되어 있는지 확인할 수 있습니다.

Android 앱의 AndroidManifest.xml에서 asset_statements 항목을 추가합니다.

<manifest>
  <application>
   …
    <meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
   …
  </application>
</manifest>

그런 다음 strings.xml에서 다음 애셋 문을 추가하고 도메인으로 site를 업데이트합니다. 이스케이프 문자를 포함해야 합니다.

<string name="asset_statements">
  [
    {
      \"relation\": [\"delegate_permission/common.handle_all_urls\"],
      \"target\": {
        \"namespace\": \"web\",
        \"site\": \"https://example.com\"
      }
    }
  ]
</string>

전문가 팁: 배열입니다. 즉, Android 앱과 두 개 이상의 웹사이트 간에 확인된 관계를 정의할 수 있습니다.

완료되면 업데이트된 앱을 기기에 설치하거나 Google Play 스토어 또는 다른 Android 앱 배포 플랫폼에 게시합니다.

Android 앱에 관해 웹사이트에 알리기

다음으로 페이지에 웹 앱 매니페스트를 추가하여 Android 앱에 관해 웹사이트에 알립니다. 매니페스트에는 platform 및 id를 비롯한 앱에 관한 세부정보를 제공하는 배열인 related_applications 속성이 포함되어야 합니다.

platform은 play여야 합니다.
id는 Android 패키지 ID입니다.

{
  ...
  "related_applications": [
    {
      "platform": "play",
      "id": "com.example.twa"
    }
  ]
  ...
}

전문가 팁: 배열입니다. 즉, 웹사이트와 두 개 이상의 Android 앱 간에 확인된 관계를 정의할 수 있습니다.

앱이 설치되어 있는지 확인

마지막으로 비동기 함수 navigator.getInstalledRelatedApps()를 호출하여 Android 앱이 설치되어 있는지 확인합니다.

Windows (UWP) 앱이 설치되어 있는지 확인

웹사이트에서 Windows 앱 (UWP를 사용하여 빌드됨)이 설치되어 있는지 확인할 수 있습니다.

PWABuilder

지원 플랫폼:

Windows 전용: Chrome 85 이상, Edge 85 이상

웹사이트에 관해 Windows 앱에 알리기

URI 핸들러를 사용하여 웹사이트와 Windows 애플리케이션 간의 확인된 관계를 정의하도록 Windows 앱을 업데이트해야 합니다. 이렇게 하면 웹사이트만 Windows 앱이 설치되어 있는지 확인할 수 있습니다.

앱의 매니페스트 파일 AppxManifest.xml 또는 Package.appxmanifest에 Windows.appUriHandler 확장 프로그램 등록을 추가합니다. 예를 들어 웹사이트 주소가 example.com인 경우 앱의 매니페스트에 다음 항목을 추가합니다.

<Applications>
  <Application Id="App" ... >
      ...
      <Extensions>
         <uap3:Extension Category="windows.appUriHandler">
          <uap3:AppUriHandler>
            <uap3:Host Name="example.com" />
          </uap3:AppUriHandler>
        </uap3:Extension>
      </Extensions>
  </Application>
</Applications>

참고로, uap3 네임스페이스를 <Package> 속성에 추가해야 할 수도 있습니다.

웹사이트에 주소가 여러 개 있는 경우 각 주소의 <uap3:AppUriHandler> 내부에 별도의 <uap3:Host Name=... /> 항목을 추가합니다.

그런 다음 .json 파일 확장자가 없는 windows-app-web-link라는 JSON 파일을 만들고 앱의 패키지 제품군 이름을 제공합니다. 해당 파일을 /.well-known/ 디렉터리 또는 서버 루트에 배치합니다.

[
  {
    "packageFamilyName": "MyApp_9jmtgj1pbbz6e",
    "paths": [ "*" ]
  }
]

전문가 팁: 배열입니다. 즉, 웹사이트와 두 개 이상의 Windows 앱 간에 확인된 관계를 정의할 수 있습니다.

패키지 제품군 이름을 확인하려면 앱을 설치하고 PowerShell에서 다음 명령어를 실행한 후 목록에서 앱을 찾습니다.

Get-AppxPackage | Select-Object PackageFamilyName

URI 핸들러 설정에 관한 자세한 내용은 앱 URI 핸들러를 사용하여 웹사이트에 앱 사용 설정하기를 참고하세요.

Windows 앱에 관해 웹사이트에 알리기

다음으로 페이지에 웹 앱 매니페스트를 추가하여 Windows 앱에 관해 웹사이트에 알립니다. 매니페스트에는 platform 및 id를 비롯한 앱에 관한 세부정보를 제공하는 배열인 related_applications 속성이 포함되어야 합니다.

platform은 windows여야 합니다.
id는 앱의 패키지 제품군 이름이며 끝에 !App이 접미사로 추가됩니다.

{
  ...
  "related_applications": [
    {
      "platform": "windows",
      "id": "MyApp_9jmtgj1pbbz6e!App"
    }
  ]
  ...
}

전문가 팁: 배열입니다. 즉, 웹사이트와 두 개 이상의 Windows 앱 간에 확인된 관계를 정의할 수 있습니다.

앱이 설치되어 있는지 확인

마지막으로 비동기 함수 navigator.getInstalledRelatedApps()를 호출하여 Windows 앱이 설치되어 있는지 확인합니다.

이 데모를 확인하세요.

프로그레시브 웹 앱이 이미 설치되어 있는지 확인 (범위 내)

PWA에서 이미 설치되어 있는지 확인할 수 있습니다. 이 경우 요청을 하는 페이지는 웹 앱 매니페스트의 범위에 정의된 대로 동일한 도메인에 있어야 하며 PWA의 범위 내에 있어야 합니다.

지원 플랫폼:

Android: Chrome 84 이상
데스크톱 (Windows, macOS, Linux, ChromeOS): Chrome 140 이상, Edge 140 이상

PWA에 관해 PWA에 알리기

PWA의 PWA 웹 앱 매니페스트에 related_applications 항목을 추가하여 PWA에 관해 PWA에 알립니다.

platform은 webapp여야 합니다.
url은 PWA의 웹 앱 매니페스트의 경로 (상대 경로일 수 있음)입니다.
id는 웹 앱 매니페스트의 id 필드에 선언되거나 브라우저에서 계산되는 웹 앱 ID입니다 (데스크톱에 필요하며 Android에는 필요하지 않음).

{
  ...
  "scope": "/",
  "start_url": "/?utm_source=home_screen",
  "related_applications": [
    {
      "platform": "webapp",
      "url": "/manifest.json",
      "id": "https://example.com/?utm_source=home_screen"
    }
  ],
  ...
}

PWA가 설치되어 있는지 확인

마지막으로 PWA의 범위 내에서 비동기 함수 navigator.getInstalledRelatedApps()를 호출하여 설치되어 있는지 확인합니다. navigator.getInstalledRelatedApps()가 PWA의 범위 외부에서 호출되면 []가 반환됩니다. 자세한 내용은 다음 섹션을 참고하세요.

프로그레시브 웹 앱이 설치되어 있는지 확인 (범위 외)

웹사이트에서 페이지가 PWA의 범위 외부에 있더라도 PWA가 설치되어 있는지 확인할 수 있습니다. 예를 들어 /landing/에서 제공되는 방문 페이지는 /pwa/에서 제공되는 PWA가 설치되어 있는지 또는 방문 페이지가 www.example.com에서 제공되고 PWA가 app.example.com에서 제공되는지 확인할 수 있습니다.

지원 플랫폼:

Android 전용: Chrome 84 이상

웹사이트에 관해 PWA에 알리기

먼저 PWA가 제공되는 서버에 디지털 애셋 링크를 추가해야 합니다. 이렇게 하면 웹사이트와 PWA 간의 확인된 관계를 정의하고 웹사이트만 PWA가 설치되어 있는지 확인할 수 있습니다.

PWA가 있는 도메인(예: app.example.com)의 /.well-known/ 디렉터리에 assetlinks.json 파일을 추가합니다. site 속성에서 검사를 실행할 웹 앱 매니페스트의 전체 경로를 제공합니다 (PWA의 웹 앱 매니페스트가 아님).

// Served from https://app.example.com/.well-known/assetlinks.json
[
  {
    "relation": ["delegate_permission/common.query_webapk"],
    "target": {
      "namespace": "web",
      "site": "https://www.example.com/manifest.json"
    }
  }
]

전문가 팁: 배열입니다. 즉, PWA와 두 개 이상의 웹사이트 간에 확인된 관계를 정의할 수 있습니다.

PWA에 관해 웹사이트에 알리기

다음으로 페이지에 웹 앱 매니페스트를 추가하여 PWA 앱에 관해 웹사이트에 알립니다. 매니페스트에는 platform 및 url을 비롯한 PWA에 관한 세부정보를 제공하는 배열인 related_applications 속성이 포함되어야 합니다.

platform은 webapp여야 합니다.
url은 PWA의 웹 앱 매니페스트의 전체 경로입니다.

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

전문가 팁: 배열입니다. 즉, 웹사이트와 두 개 이상의 PWA 간에 확인된 관계를 정의할 수 있습니다.

PWA가 설치되어 있는지 확인

마지막으로 비동기 함수 navigator.getInstalledRelatedApps()를 호출하여 PWA가 설치되어 있는지 확인합니다.

궁금한 점이 더 있을 때

궁금한 점이 더 있을 때 StackOverflow에서 getInstalledRelatedApps 태그를 확인하여 다른 사용자가 비슷한 질문을 했는지 확인합니다. 그렇지 않은 경우 질문을 하고 progressive-web-apps 태그를 지정하세요. Google팀에서 이 태그를 자주 모니터링하고 질문에 답변하려고 노력합니다.

의견

Chrome 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요?

https://new.crbug.com에서 버그를 신고하세요. 최대한 많은 세부정보를 포함하고 버그를 재현하는 방법을 제공하고 Mobile>WebAPKs를 구성요소 상자에 입력합니다.

유용한 링크

감사합니다.

Windows 앱 테스트에 관한 세부정보를 제공해 주신 Microsoft의 성국 추와 Chrome 세부정보를 제공해 주신 라얀 칸소에게 특별히 감사드립니다.

앱이 설치되어 있나요? Get Installed Related Apps API를 사용하면 알 수 있습니다. 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

Get Installed Related Apps API란 무엇인가요?

확인할 수 있는 지원되는 앱 유형

Android 앱이 설치되어 있는지 확인

웹사이트에 관해 Android 앱에 알리기

Android 앱에 관해 웹사이트에 알리기

앱이 설치되어 있는지 확인

Windows (UWP) 앱이 설치되어 있는지 확인

웹사이트에 관해 Windows 앱에 알리기

Windows 앱에 관해 웹사이트에 알리기

앱이 설치되어 있는지 확인

프로그레시브 웹 앱이 이미 설치되어 있는지 확인 (범위 내)

PWA에 관해 PWA에 알리기

PWA가 설치되어 있는지 확인

프로그레시브 웹 앱이 설치되어 있는지 확인 (범위 외)

웹사이트에 관해 PWA에 알리기

PWA에 관해 웹사이트에 알리기

PWA가 설치되어 있는지 확인

궁금한 점이 더 있을 때

의견

유용한 링크

감사합니다.

앱이 설치되어 있나요? Get Installed Related Apps API를 사용하면 알 수 있습니다.