앱이 설치되어 있습니까? getInstalledRelatedApps()가 알려줄 것입니다!

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

Dec 20, 2018 — 업데이트됨 Sep 16, 2021

Available in: English, Русский 및 日本語

Appears in: 프로그레시브 웹 앱

Pete LePage

Twitter GitHub Glitch Homepage

getInstalledRelatedApps() API란 무엇입니까? #

Android 앱이 이미 설치되어 있는지 확인하기 위해 `getInstalledRelatedApps()`를 사용하는 웹사이트.

getInstalledRelatedApps()를 사용하면 여러분의 페이지에서 여러분의 모바일, 데스크톱 앱 또는 경우에 따라서 PWA가 사용자 장치에 설치되었는지 확인하고 그러한 경우 사용자 경험을 최적화 할 수 있습니다.

예를 들어 앱이 이미 설치된 경우 다음을 할 수 있습니다.

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

getInstalledRelatedApps() API를 사용하려면 앱에 사이트에 대해 알려준 다음 사이트에 앱에 대해 알려야 합니다. 둘 사이의 관계를 정의하면 앱이 설치되었는지 확인할 수 있습니다.

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

앱 유형	확인 가능 버전
Android 앱	Android 전용 Chrome 80 이상
Windows(UWP) 앱	Windows 전용 Chrome 85 이상 Edge 85 이상
동일한 범위 또는 다른 범위에 설치된 PWA.	Android 전용 Chrome 84 이상

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

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

Supported on

Android: Chrome 80 이상

웹사이트에 대해 Android 앱에 알리기 #

먼저 Digital Asset Links 시스템을 사용하여 웹사이트와 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) 앱이 설치되어 있는지 확인 #

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

Supported on

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 처리기 설정에 대한 자세한 내용은 앱 URL 처리기를 사용하여 웹 사이트용 앱 활성화를 참조하세요.

웹 사이트에 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가 이미 설치되어 있는지 확인할 수 있습니다. 이 경우 요청하는 페이지는 웹 앱 매니페스트의 범위에 의해 정의된 대로 동일한 도메인에 있어야 하고 PWA 범위 내에 있어야 합니다.

Supported on

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

Supported on

Android: Chrome 84 이상

웹사이트에 대해 PWA에 알리세요 #

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

assetlinks.json 파일을 PWA가 있는 도메인의 /.well-known/ 디렉터리에 추가합니다(예: 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가 설치되었는지 확인합니다.

데모 사용해보기

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 태그를 지정하세요. 저희 팀은 해당 태그를 자주 모니터링하고 귀하의 질문에 답변하려고 합니다.

피드백 #

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

[https://new.crbug.com][에서] 버그를 신고하세요. 가능한 한 많은 세부 정보를 포함하고 버그를 재현하기 위한 간단한 지침을 제공하고 구성 요소 상자에 Mobile>WebAPKs를 입력합니다. Glitch 는 빠르고 쉬운 재현을 공유하는 데 유용합니다.

API에 대한 지원 표시 #

getInstalledRelatedApps()를 사용할 계획이십니까? Chrome 팀이 기능의 우선 순위를 정하고 브라우저 공급업체에 이 API의 지원이 얼마나 중요한지 보여주기 위해서는 여러분의 공개 지원이 힘이 됩니다.

WICG Discourse 스레드에서 API 사용 계획을 공유하세요.
@ChromiumDev으로 해시태그 #getInstalledRelatedApps를 포함한 트윗을 보내서 어디에서 어떻게 활용하고 있는지 알려주세요.

유용한 링크 #

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

감사의 말 #

Windows 앱 테스트에 대한 세부 정보를 제공한 Microsoft의 Sunggook Chu와 Chrome 세부 정보에 대한 도움을 준 Rayan Kanso에게 특별히 감사드립니다.

마지막 업데이트: Sep 16, 2021 — 기사 개선하기

Return to all articles