이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

Pete LePage

Alexey Rodionov

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

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

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

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

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

PWABuilder는 내부적으로 Bubblewrap을 사용하여 Android 및 ChromeOS용 PWA를 패키징합니다.

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

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

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

참고: Get Installed Related Apps API를 사용하면 내 앱이 설치되어 있는지 여부만 확인할 수 있습니다. 설치된 모든 앱의 목록을 가져오거나 다른 서드 파티 앱이 설치되어 있는지 확인할 수 없습니다.

설치된 관련 앱 가져오기 API를 사용하려면 앱에 페이지를 알리고 페이지에 앱을 알려야 합니다. 두 항목 간의 관계를 정의한 후 관련 앱이 설치되어 있는지 확인할 수 있습니다.

사이트에서 너무 광범위한 자체 앱을 테스트하지 못하도록 웹 앱 매니페스트에 선언된 처음 세 개의 앱만 고려됩니다.

다른 강력한 웹 API와 마찬가지로 설치된 관련 앱 가져오기 API는 HTTPS를 통해 제공되는 경우에만 사용할 수 있습니다.

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>

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

웹사이트에 Android 앱 정보 알리기

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

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

{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome"
  }]
}

앱이 설치되어 있는지 확인

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

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

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

지원되는 기기:

Windows만 해당: Chrome 85 이상, Edge 85 이상

Windows 앱에 웹사이트 정보 제공

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

앱의 매니페스트 파일 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>

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

그런 다음 windows-app-web-link이라는 JSON 파일 (.json 파일 확장자 없음)을 만들고 앱의 패키지 패밀리 이름을 제공합니다. 해당 파일을 서버 루트 또는 /.well-known/ 디렉터리에 배치합니다. 패키지 패밀리 이름은 앱 매니페스트 디자이너의 패키징 섹션에서 확인할 수 있습니다.

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

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

웹사이트에 Windows 앱 정보 알리기

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

platform은 windows여야 합니다.
id는 앱의 패키지 패밀리 이름으로, Package.appxmanifest 파일의 <Application> Id 값이 추가됩니다.

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

앱이 설치되어 있는지 확인

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

이 데모를 확인하세요.

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

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

지원되는 기기:

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

PWA에 관한 정보 제공

PWA의 웹 앱 매니페스트에 related_applications 항목을 추가하여 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가 있는 도메인의 /.well-known/ 디렉터리에 assetlinks.json 파일을 추가합니다(예: app.example.com). 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 앱을 알립니다. 매니페스트에는 platform 및 url를 비롯한 PWA에 관한 세부정보를 제공하는 배열인 related_applications 속성이 포함되어야 합니다.

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

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

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가 설치되어 있는지 확인

궁금한 점이 더 있을 때

의견

유용한 링크

감사합니다.

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