getInstalledRelatedApps()
메서드를 사용하면 웹사이트에서 iOS/Android/데스크톱 앱 또는 PWA가 사용자 기기에 설치되어 있는지 확인할 수 있습니다.
getInstalledRelatedApps() API란 무엇인가요?
getInstalledRelatedApps()
를 사용하면 개발자 페이지에서 개발자의 모바일 앱인지 데스크톱 앱인지 확인하거나 경우에 따라 프로그레시브 웹 앱 (PWA)이 사용자의 기기에 이미 설치되어 있는지 확인할 수 있으며, 설치된 경우 사용자 환경을 맞춤설정할 수 있습니다.
예를 들어 앱이 이미 설치되어 있는 경우:
- 제품 마케팅 페이지에서 앱으로 바로 사용자를 리디렉션합니다.
- 다른 앱의 알림과 같은 일부 기능을 중앙 집중화하여 중복 알림을 방지합니다.
- 다른 앱이 이미 설치된 경우 PWA의 설치를 홍보하지 않습니다.
getInstalledRelatedApps()
API를 사용하려면 앱에 사이트 정보를 알려준 후 사이트에 앱에 관해 알려야 합니다. 둘 사이의 관계를 정의하면 앱이 설치되었는지 확인할 수 있습니다.
지원되는 앱 유형 확인 가능
앱 유형 | 선택 가능 날짜 |
---|---|
Android 앱 |
Android만 해당 Chrome 80 이상 |
Windows (UWP) 앱 |
Windows만 해당 Chrome 85 이상 Edge 85 이상 |
프로그레시브 웹 앱 동일한 범위 또는 다른 범위로 설치됨 |
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 앱을 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) 앱이 설치되어 있는지 확인
웹사이트에서 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 앱에 관해 알립니다. 매니페스트에는 related_applications
속성이 포함되어야 합니다. 이 속성은 platform
, id
를 비롯하여 앱의 세부정보를 제공하는 배열입니다.
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()
를 호출하여 PWA가 설치되어 있는지 확인합니다. 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"
}
}
]
웹사이트에 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 팀은 이러한 태그를 자주 모니터링하고
질문에 답변해 드립니다
의견
Chrome 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요?
- https://new.crbug.com에서 버그를 신고합니다. 세부정보를 최대한 많이 포함하고, 버그 재현을 위한 간단한 안내를 제공하며, Components 상자에
Mobile>WebAPKs
를 입력합니다. Glitch는 쉽고 빠른 재현을 공유하는 데 효과적입니다.
API 지원 표시
getInstalledRelatedApps()
API를 사용할 계획인가요? 공개 지원을 통해 Chrome팀은 기능의 우선순위를 지정하고 다른 브라우저 공급업체에 기능을 지원하는 것이 얼마나 중요한지 보여줄 수 있습니다.
- WICG Discourse 대화목록에서 API 사용 계획을 공유해 주세요.
- 해시태그
#getInstalledRelatedApps
를 사용하여 @ChromiumDev로 트윗을 보내고 사용 위치와 방법을 알려주세요.
유용한 링크
감사합니다.
Windows 앱 테스트 관련 세부정보를 도와준 Microsoft의 추성국 씨와 Chrome 세부정보와 관련해 도움을 주신 라얀 칸소에게 특별히 감사의 말씀을 전합니다.