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

앱이 설치되었나요? getInstalledRelatedApps()로 알 수 있습니다.

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

Pete LePage

getInstalledRelatedApps() API란 무엇인가요?

`getInstalledRelatedApps()`를 사용하여 Android 앱이 이미 설치되어 있는지 확인하는 웹사이트입니다.

getInstalledRelatedApps()를 사용하면 내 페이지에서 내 모바일 또는 데스크톱 앱 또는 경우에 따라 프로그레시브 웹 앱 (PWA)이 사용자의 기기에 이미 설치되어 있는지 확인하고, 설치된 경우 사용자 환경을 맞춤설정할 수 있습니다.

예를 들어 앱이 이미 설치된 경우:

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

getInstalledRelatedApps() API를 사용하려면 앱에 사이트에 관해 알린 다음 사이트에 앱에 관해 알려야 합니다. 두 항목 간의 관계를 정의한 후에는 앱이 설치되어 있는지 확인할 수 있습니다.

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

앱 유형	선택할 수 있는 위치
Android 앱	Android만 해당 Chrome 80 이상
Windows (UWP) 앱	Windows만 해당 Chrome 85 이상 Edge 85 이상
프로그레시브 웹 앱 동일한 범위 또는 다른 범위에 설치됩니다.	Android만 해당 Chrome 84 이상

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

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 앱을 Play 스토어에 게시합니다.

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

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

platform은 play여야 합니다.
id는 Android 앱의 GooglePlay 애플리케이션 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 이상

PWA에 자체 정보 제공

PWA의 웹 앱 매니페스트에 related_applications 항목을 추가하여 PWA에 자체 정보를 알립니다.

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

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

PWA가 설치되어 있는지 확인

마지막으로 PWA의 범위 내에서 navigator.getInstalledRelatedApps()를 호출하여 설치되었는지 확인합니다. getInstalledRelatedApps()가 PWA의 범위 외부에서 호출되면 false를 반환합니다. 자세한 내용은 다음 섹션을 참조하세요.

데모 사용해 보기

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

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

지원되는 플랫폼

Android: Chrome 84 이상

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

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

PWA가 있는 도메인의 /.well-known/ 디렉터리(예: app.example.com)에 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"
    }
  }
]

참고: assetlinks.json 파일을 만들 때 파일 이름을 다시 확인하세요. 디버깅하는 데 몇 시간씩 낭비하다가 파일 이름에 's'가 하나 더 추가되어 있음을 깨달았습니다.

웹사이트에 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가 설치되어 있는지 확인합니다.

데모 사용해 보기

getInstalledRelatedApps() 호출

navigator.getInstalledRelatedApps()를 호출하면 사용자 기기에 설치된 앱 배열로 확인되는 약속이 반환됩니다.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

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

다른 대부분의 강력한 웹 API와 마찬가지로 getInstalledRelatedApps() API는 HTTPS를 통해 제공되는 경우에만 사용할 수 있습니다.

궁금하신 사항이 더 있나요?

궁금하신 사항이 더 있나요? StackOverflow의 getInstalledRelatedApps 태그를 확인하여 다른 사용자가 유사한 질문을 했는지 확인합니다. 그렇지 않은 경우 해당 페이지에서 질문을 하고 progressive-web-apps 태그를 지정하세요. YouTube팀에서는 이 태그를 자주 모니터링하고 질문에 답변하려고 노력하고 있습니다.

의견

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

https://new.crbug.com에서 버그를 신고합니다. 최대한 많은 세부정보를 포함하고 버그 재현을 위한 간단한 안내를 제공하고 구성요소 상자에 Mobile>WebAPKs를 입력합니다. Glitch는 빠르고 간편한 재현을 공유하는 데 적합합니다.

API 지원 표시

getInstalledRelatedApps() API를 사용할 계획인가요? 공개 지원은 Chrome팀이 기능의 우선순위를 지정하는 데 도움이 되며 다른 브라우저 공급업체에 기능을 지원하는 것이 얼마나 중요한지 보여줍니다.

WICG Discourse 대화목록에서 API를 사용할 계획을 공유합니다.
#getInstalledRelatedApps 해시태그를 사용하여 @ChromiumDev에 트윗을 보내고 사용 빈도와 사용 방법을 알려주세요.

유용한 링크

getInstalledRelatedApps() API에 관한 공개 설명
사양 초안
버그 추적
ChromeStatus.com 항목
Blink 구성요소: Mobile>WebAPKs

감사합니다.

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