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

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

getInstalledRelatedApps() 메서드를 사용하면 웹사이트에서 iOS/Android/데스크톱 앱 또는 PWA가 사용자 기기에 설치된 경우

Pete LePage

getInstalledRelatedApps() API란 무엇인가요?

</ph> `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 앱의 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 앱을 알립니다. 페이지에 웹 앱 매니페스트 추가 매니페스트는 세부정보를 제공하는 배열인 related_applications 속성을 포함합니다. platform, id 등 앱에 대한 정보

platform는 play여야 합니다.
id는 Android 앱의 Google Play 애플리케이션 ID입니다.

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

앱이 설치되어 있는지 확인

마지막으로 navigator.getInstalledRelatedApps()를 호출하여 Android 앱이 설치되어 있어야 합니다.

데모 사용해 보기

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

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

지원 플랫폼

Windows: Chrome 85 이상, Edge 85 이상

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

Windows 앱을 업데이트하여 URI 핸들러를 사용하여 웹사이트 및 Windows 애플리케이션을 실행할 수 있습니다. 이 고객님의 웹사이트에서만 Windows 앱 설치 여부를 확인할 수 있습니다.

앱의 매니페스트에 Windows.appUriHandler 확장 프로그램 등록을 추가합니다. 파일 Package.appxmanifest. 예를 들어 웹사이트 주소가 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> 속성

그런 다음 .json 파일 확장자 없이 이름이 지정된 JSON 파일을 만듭니다. windows-app-web-link하고 앱의 패키지 계열 이름을 제공합니다. 장소 해당 파일을 서버 루트 또는 /.well-known/ 디렉터리에 저장합니다. 나 앱 매니페스트의 패키징 섹션에서 패키지 계열 이름을 찾을 수 있습니다. 있습니다.

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

다음에 대한 앱 URI 핸들러를 사용하여 웹사이트용 앱 사용 설정에서 다음을 참조하세요. URI 핸들러 설정에 대한 자세한 내용을 참조하세요.

웹사이트에 Windows 앱 알리기

다음으로, 다음과 같이 Windows 앱에 관한 정보를 웹사이트에 알립니다. 페이지에 웹 앱 매니페스트 추가 매니페스트는 세부정보를 제공하는 배열인 related_applications 속성을 포함합니다. platform, id 등 앱에 대한 정보

platform는 windows여야 합니다.
id는 <Application> Id가 추가된 앱의 패키지 계열 이름입니다. 값을 Package.appxmanifest 파일에 포함합니다.

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

앱이 설치되어 있는지 확인

마지막으로 navigator.getInstalledRelatedApps()를 호출하여 Windows 앱이 설치되어 있음

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

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

지원 플랫폼

Android: Chrome 84 이상

PWA에 정보 알리기

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

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

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

PWA가 설치되어 있는지 확인

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

데모 사용해 보기

프로그레시브 웹 앱 설치 여부 확인 (지원 범위 외)

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

지원 플랫폼

Android: Chrome 84 이상

PWA에 웹사이트 정보 알리기

먼저 PWA가 있는 서버에 디지털 애셋 링크를 추가해야 합니다. 선택할 수 있습니다 이렇게 하면 웹사이트와 PWA가 설치되어 있는지 웹사이트만 확인할 수 있도록 합니다.

assetlinks.json 파일을 /.well-known/ 디렉터리에 추가합니다. PWA가 위치한 도메인의 도메인(예: 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"
    }
  }
]

드림

참고: assetlinks.json 파일을 만들 때 파일 이름을 다시 확인하세요. 디버깅에 많은 시간을 낭비했지만 's'를 추가했음을 깨달았습니다. 를 입력합니다.

웹사이트에 PWA 정보 알리기

다음으로, 다음과 같이 PWA 앱에 관한 정보를 웹사이트에 알립니다. 페이지에 웹 앱 매니페스트 추가 매니페스트는 세부정보를 제공하는 배열인 related_applications 속성을 포함합니다. platform, url 등 PWA에 관한 정보

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 태그 Google Cloud팀에서는 해당 태그를 사용하고 질문에 답변을 시도합니다.

의견

Chrome 구현에서 버그를 발견하셨나요? 아니면 구현이 어떻게 해야 할까요?

https://new.crbug.com에서 버그를 신고합니다. 최대한 버그 재현을 위한 간단한 안내를 제공하고, 구성요소 상자에 Mobile>WebAPKs를 입력합니다. 글리치 쉽고 빠르게 재현할 수 있습니다.

API 지원 표시

getInstalledRelatedApps() API를 사용할 계획이신가요? 공개 지원을 통해 Chrome팀이 기능의 우선순위를 정하고 이들을 지원하는 것이 얼마나 중요한지 잘 알고 있습니다.

WICG 담화 대화목록에서 API 사용 계획을 공유합니다.
해시태그를 사용하여 @ChromiumDev에 트윗을 보냅니다. #getInstalledRelatedApps 어디서 어떻게 사용하는지 Google에 알려주세요.

유용한 링크

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

감사합니다.

세부정보에 도움을 주신 Microsoft의 순국 추에 씨께 감사의 말씀을 전합니다. 은 Windows 앱 테스트에, Rayan Kanso는 Chrome 세부정보에 관한 도움을 받으실 수 있습니다.