getInstalledRelatedApps()
yöntemi, web sitenizin iOS/Android/masaüstü uygulamanızın veya PWA'nızın kullanıcının cihazına yüklenip yüklenmediğini kontrol etmesine olanak tanır.
getInstalledRelatedApps() API'si nedir?
getInstalledRelatedApps()
, sayfanızın mobil veya masaüstü uygulamanızın ya da bazı durumlarda progresif web uygulamanızın (PWA) kullanıcının cihazına önceden yüklü olup olmadığını kontrol etmesini sağlar ve yüklüyse kullanıcı deneyimini özelleştirmenize olanak tanır.
Örneğin, uygulamanız zaten yüklüyse:
- Kullanıcıyı bir ürün pazarlama sayfasından doğrudan uygulamanıza yönlendirme.
- Bildirimler gibi bazı işlevleri diğer uygulamada merkezileştirerek yinelenen bildirimleri önleme
- Diğer uygulamanız zaten yüklüyse PWA'nızın yüklemesini teşvik etmemek.
getInstalledRelatedApps()
API'yi kullanmak için uygulamanıza siteniz hakkında bilgi vermeniz ve ardından sitenize uygulamanızdan bahsetmeniz gerekir. İkisi arasındaki ilişkiyi tanımladıktan sonra, uygulamanın yüklü olup olmadığını kontrol edebilirsiniz.
Kontrol edebileceğiniz desteklenen uygulama türleri
Uygulama türü | Kontrol edilebilirlik başlangıç tarihi |
---|---|
Android uygulaması |
Yalnızca Android Chrome 80 veya sonraki sürümler |
Windows (UWP) uygulaması |
Yalnızca Windows Chrome 85 veya sonraki sürümler Edge 85 veya sonraki sürümler |
Progresif Web Uygulaması Aynı kapsamda veya farklı bir kapsamda yüklenmiş olmalıdır. |
Yalnızca Android Chrome 84 veya sonraki sürümler |
Android uygulamanızın yüklü olup olmadığını kontrol etme
Web siteniz, Android uygulamanızın yüklü olup olmadığını kontrol edebilir.
Android: Chrome 80 veya sonraki sürümler
Android uygulamanıza web siteniz hakkında bilgi verme
Öncelikle, Digital Asset Links sistemini kullanarak web siteniz ile Android uygulamanız arasındaki ilişkiyi tanımlamak için Android uygulamanızı güncellemeniz gerekir. Böylece Android uygulamanızın yüklü olup olmadığını yalnızca web siteniz kontrol edebilir.
Android uygulamanızın AndroidManifest.xml
bölümüne bir asset_statements
girişi ekleyin:
<manifest>
<application>
…
<meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
…
</application>
</manifest>
Ardından, strings.xml
bölümüne aşağıdaki öğe bildirimini ekleyerek site
öğesini alanınızla güncelleyin. Çıkış karakterlerini eklemeyi unutmayın.
<string name="asset_statements">
[{
\"relation\": [\"delegate_permission/common.handle_all_urls\"],
\"target\": {
\"namespace\": \"web\",
\"site\": \"https://example.com\"
}
}]
</string>
İşlem tamamlandıktan sonra güncellenmiş Android uygulamanızı Play Store'da yayınlayın.
Web sitenizde Android uygulamanız hakkında bilgi verme
Daha sonra, sayfanıza bir web uygulaması manifesti ekleyerek web sitenizi Android uygulamanız hakkında bilgilendirin. Manifest, platform
ve id
dahil olmak üzere uygulamanızla ilgili ayrıntıları sağlayan bir dizi olan related_applications
mülkünü içermelidir.
platform
,play
olmalıdırid
, Android uygulamanızın Google Play uygulama kimliğidir
{
"related_applications": [{
"platform": "play",
"id": "com.android.chrome",
}]
}
Uygulamanızın yüklü olup olmadığını kontrol etme
Son olarak, Android uygulamanızın yüklü olup olmadığını kontrol etmek için navigator.getInstalledRelatedApps()
numaralı telefonu arayın.
Demoyu deneyin
Windows (UWP) uygulamanızın yüklü olup olmadığını kontrol etme
Web siteniz, Windows uygulamanızın (UWP kullanılarak oluşturulmuş) yüklü olup olmadığını kontrol edebilir.
Windows: Chrome 85 veya sonraki sürümler, Edge 85 veya sonraki sürümler
Windows uygulamanıza web sitenizi bildirme
URI işleyicileri kullanarak web siteniz ile Windows uygulamanız arasındaki ilişkiyi tanımlamak için Windows uygulamanızı güncellemeniz gerekir. Bu sayede, Windows uygulamanızın yüklü olup olmadığını yalnızca web siteniz kontrol edebilir.
Windows.appUriHandler
uzantısı kaydını uygulamanızın manifest dosyasına Package.appxmanifest
ekleyin. Örneğin, web sitenizin adresi example.com
ise uygulamanızın manifest dosyasına aşağıdaki girişi eklersiniz:
<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>
özelliğinize uap3
ad alanını eklemeniz gerekebileceğini unutmayın.
Ardından, windows-app-web-link
adlı bir JSON dosyası (.json
dosya uzantısı olmadan) oluşturun ve uygulamanızın paket aile adını sağlayın. Bu dosyayı sunucunuzun kök dizinine veya /.well-known/
dizinine yerleştirin. Paket ailesi adını, uygulama manifesti tasarımcısının Paketleme bölümünde bulabilirsiniz.
[{
"packageFamilyName": "MyApp_9jmtgj1pbbz6e",
"paths": [ "*" ]
}]
URI işleyicilerin ayarlanmasıyla ilgili tüm ayrıntıları öğrenmek için Uygulama URI işleyicileri kullanan web siteleri için uygulamaları etkinleştirme bölümüne bakın.
Web sitenizde Windows uygulamanız hakkında bilgi verme
Ardından, sayfanıza bir web uygulaması manifesti ekleyerek web sitenize Windows uygulamanızı tanıtın. Manifest, platform
ve id
dahil olmak üzere uygulamanızla ilgili ayrıntıları sağlayan bir dizi olan related_applications
özelliğini içermelidir.
platform
,windows
olmalıdırid
, uygulamanızın paket aile adıdır vePackage.appxmanifest
dosyanızdaki<Application>
Id
değerine eklenir.
{
"related_applications": [{
"platform": "windows",
"id": "MyApp_9jmtgj1pbbz6e!App",
}]
}
Uygulamanızın yüklü olup olmadığını kontrol etme
Son olarak, Windows uygulamanızın yüklü olup olmadığını kontrol etmek için navigator.getInstalledRelatedApps()
numaralı telefonu arayın.
Progressive Web Uygulamanızın önceden yüklü olup olmadığını (kapsamda) kontrol edin
PWA'nız uygulamanın zaten yüklü olup olmadığını kontrol edebilir. Bu durumda, istekte bulunan sayfa aynı alan adında ve web uygulaması manifest'indeki kapsamla tanımlanan PWA'nızın kapsamında olmalıdır.
Android: Chrome 84 veya sonraki sürümler
PWA'nızın kendisi hakkında bilgi vermesi
PWA web uygulaması manifestinize bir related_applications
girişi ekleyerek PWA'nızı kendiniz hakkında bilgilendirin.
platform
,webapp
olmalıdırurl
, PWA'nızın web uygulaması manifestinin tam yoludur.
{
…
"scope": "/",
"start_url": "/",
"related_applications": [{
"platform": "webapp",
"url": "https://example.com/manifest.json",
}],
…
}
PWA'nızın yüklü olup olmadığını kontrol etme
Son olarak, yüklü olup olmadığını kontrol etmek için PWA'nızın kapsamında navigator.getInstalledRelatedApps()
çağrısı yapın. getInstalledRelatedApps()
, PWA'nızın kapsamı dışında çağrılırsa yanlış değerini döndürür. Ayrıntılar için sonraki bölüme bakabilirsiniz.
Demoyu deneyin
Progresif Web Uygulamanızın yüklü olup olmadığını kontrol etme (kapsam dışında)
Web siteniz, sayfa PWA'nızın kapsamının dışında olsa bile PWA'nızın yüklü olup olmadığını kontrol edebilir. Örneğin, /landing/
üzerinden sunulan bir açılış sayfası, /pwa/
üzerinden sunulan PWA'nın yüklü olup olmadığını veya açılış sayfanızın www.example.com
ile, PWA'nızın da app.example.com
üzerinden sunulup sunulmadığını kontrol edebilir.
Android: Chrome 84 veya sonraki sürümler
PWA'nıza web siteniz hakkında bilgi verme
Öncelikle, PWA'nızın sunulduğu sunucuya dijital öğe bağlantıları eklemeniz gerekir. Bu, web siteniz ile PWA'nız arasındaki ilişkinin tanımlanmasına yardımcı olur ve PWA'nızın yüklü olup olmadığını yalnızca web sitenizin kontrol etmesini sağlar.
PWA'nın bulunduğu alanın /.well-known/
dizinine bir assetlinks.json
dosyası ekleyin (ör. app.example.com
). site
özelliğinde, kontrolü gerçekleştirecek web uygulaması manifestinin tam yolunu sağlayın (PWA'nızın web uygulaması manifestini değil).
// 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"
}
}
]
Web sitenizde PWA'nız hakkında bilgi verin
Ardından, sayfanıza bir web uygulaması manifesti ekleyerek web sitenize PWA uygulamanız hakkında bilgi verin. Manifest, platform
ve url
dahil olmak üzere PWA'nızla ilgili ayrıntıları sağlayan bir dizi olan related_applications
mülkünü içermelidir.
platform
,webapp
olmalıdırurl
, PWA'nızın web uygulaması manifestinin tam yoludur.
{
"related_applications": [{
"platform": "webapp",
"url": "https://app.example.com/manifest.json",
}]
}
PWA'nızın yüklü olup olmadığını kontrol etme
Son olarak, PWA'nızın yüklü olup olmadığını kontrol etmek için navigator.getInstalledRelatedApps()
numaralı telefonu arayın.
Demoyu deneyin
getInstalledRelatedApps() çağrısı
navigator.getInstalledRelatedApps()
çağrısı, kullanıcının cihazında yüklü olan uygulamalarınızın bir dizisiyle çözülen bir promise döndürür.
const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
console.log(app.id, app.platform, app.url);
});
Sitelerin kendi uygulamalarından çok geniş bir grubu test etmesini önlemek için yalnızca web uygulaması manifestinde belirtilen ilk üç uygulama dikkate alınır.
Diğer güçlü web API'lerinin çoğu gibi getInstalledRelatedApps()
API de yalnızca HTTPS üzerinden sunulduğunda kullanılabilir.
Başka sorularınız mı var?
Başka sorularınız mı var? Başka kullanıcıların benzer sorular sorup sormadığını görmek için StackOverflow'daki getInstalledRelatedApps
etiketine göz atın. Aksi takdirde, sorununuzu bu forumda sorun ve progressive-web-apps
etiketiyle etiketlediğinizden emin olun. Ekibimiz bu etiketi sık sık
izleyerek sorularınızı yanıtlamaya çalışır.
Geri bildirim
Chrome'un uygulamasında bir hata mı buldunuz? Yoksa uygulama, spesifikasyondan farklı mı?
- https://new.crbug.com adresinden hata kaydı oluşturun. Olabildiğince fazla ayrıntı ekleyin, hatayı yeniden oluşturmayla ilgili basit talimatlar sağlayın ve Bileşenler kutusuna
Mobile>WebAPKs
yazın. Glitch, hızlı ve kolay yeniden oluşturma işlemlerini paylaşmak için mükemmel bir araçtır.
API'yi destekleme
getInstalledRelatedApps()
API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chrome ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı tedarikçi firmalarına bu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.
- API'yi nasıl kullanmayı planladığınızı WICG Discourse mesaj dizisinde paylaşın.
#getInstalledRelatedApps
hashtag'ini kullanarak @ChromiumDev hesabına tweet gönderin ve bu özelliği nerede ve nasıl kullandığınızı bize bildirin.
Faydalı bağlantılar
getInstalledRelatedApps()
API'si için herkese açık açıklama- Özellik taslağı
- İzleme hatası
- ChromeStatus.com girişi
- Blink Bileşeni:
Mobile>WebAPKs
Teşekkürler
Windows uygulamalarını test etmeyle ilgili ayrıntılar konusunda yardımcı olduğu için Microsoft'tan Sunggook Chue'ya ve Chrome ayrıntılarıyla ilgili yardım için Rayan Kanso'ya özel olarak teşekkür ediyoruz.