getInstalledRelatedApps()
yöntemi, web sitenizin kullanıcının cihazında iOS/Android/masaüstü uygulamanızın veya PWA'nızın yüklü olup olmadığını kontrol etmesini sağlar.
getloadİlgiliApps() API nedir?
getInstalledRelatedApps()
, sizin sayfanızın kendi mobil veya masaüstü uygulamanızın veya bazı durumlarda Progresif Web Uygulamanızın (PWA) bir kullanıcının cihazında yüklü olup olmadığını kontrol etmesini sağlar ve varsa 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
- Yinelenen bildirimleri önlemek için diğer uygulamadaki bildirimler gibi bazı işlevleri merkezileştirme.
- Diğer uygulamanız zaten yüklüyse PWA'nızın yüklemesini tanıtmamak.
getInstalledRelatedApps()
API'yi kullanmak için uygulamanıza siteniz hakkında bilgi vermeniz, ardından sitenizi uygulamanızdan bahsetmeniz gerekir. Bu ikisi 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 edilebilir |
---|---|
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üklenir. |
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 verin
Ö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 sadece web siteniz Android uygulamanızın yüklü olup olmadığını 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 ifadesini ekleyin ve site
verisini alanınızla güncelleyin. Çıkış karakterlerini eklediğinizden emin olun.
<string name="asset_statements">
[{
\"relation\": [\"delegate_permission/common.handle_all_urls\"],
\"target\": {
\"namespace\": \"web\",
\"site\": \"https://example.com\"
}
}]
</string>
İşlem tamamlandığında, güncellenen Android uygulamanızı Play Store'da yayınlayın.
Web sitenize Android uygulamanızdan bahsedin
Daha sonra, sayfanıza bir web uygulaması manifesti ekleyerek web sitenizden Android uygulamanız hakkında bilgi verin. Manifest, platform
ve id
dahil olmak üzere uygulamanızla ilgili ayrıntıları sağlayan related_applications
özelliğini 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ümleri, Edge 85 veya sonraki sürümleri
Windows uygulamanıza web siteniz hakkında bilgi verin
URI İşleyicileri'ni kullanarak web siteniz ve 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ı 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
adında bir JSON dosyası (.json
dosya uzantısı olmadan) oluşturun ve uygulamanızın paket aile adını girin. 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şleyicilerini ayarlamayla ilgili tüm ayrıntıları öğrenmek üzere Uygulama URI işleyicilerini kullanarak web siteleri için uygulamaları etkinleştirme bölümüne bakın.
Web sitenize Windows uygulamanızdan bahsedin
Daha sonra, sayfanıza bir web uygulaması manifesti ekleyerek web sitenize Windows uygulamanız hakkında bilgi verin. Manifest'te, platform
ve id
dahil olmak üzere uygulamanızla ilgili ayrıntıları sağlayan related_applications
özelliği bulunmalıdır.
platform
,windows
olmalıdırid
,Package.appxmanifest
dosyanızda<Application>
Id
değerinin sonuna eklenen uygulamanızın paket aile adıdır.
{
"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()
çağrısı yapın.
Progresif Web Uygulamanızın zaten yüklü olup olmadığını kontrol etme (kapsam dahilinde)
PWA'nız, uygulamanın yüklü olup olmadığını kontrol edebilir. Bu durumda, isteği oluşturan sayfa aynı alanda ve web uygulaması manifest dosyasındaki kapsam tarafından tanımlanan PWA'nızın kapsamında olmalıdır.
Android: Chrome 84 veya sonraki sürümler
PWA'nıza kendisini anlatın
PWA'ların web uygulaması manifest dosyasına bir related_applications
girişi ekleyerek PWA'nıza kendisini tanıtın.
platform
,webapp
olmalıdır- PWA'nızın web uygulaması manifest dosyasına giden tam yol
url
şeklindedir.
{
…
"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ı içinden navigator.getInstalledRelatedApps()
yöntemini çağırın. getInstalledRelatedApps()
, PWA'nızın kapsamı dışında çağrılırsa false döndürülü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, PWA'nızın kapsamı 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üklenip yüklenmediğini veya açılış sayfanızın www.example.com
üzerinden ve PWA'nızın app.example.com
üzerinden sunulup sunulmadığını kontrol edebilir.
Android: Chrome 84 veya sonraki sürümler
PWA'nıza web sitenizden bahsedin
Öncelikle, PWA'nızın yayınlandığı sunucuya dijital öğe bağlantıları eklemeniz gerekir. Bu, web siteniz ile PWA'nız arasındaki ilişkiyi tanımlamaya yardımcı olur ve PWA'nızın yüklenip yüklenmediğini yalnızca web sitenizin kontrol etmesini sağlar.
PWA'nın bulunduğu alanın /.well-known/
dizinine (örneğin, app.example.com
) bir assetlinks.json
dosyası ekleyin. site
mülkünde, kontrolü gerçekleştirecek web uygulaması manifestinin tam yolunu (PWA'nızın web uygulaması manifestini değil) sağlayın.
// 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 sitenize 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, PWA'nızla ilgili ayrıntıları (platform
ve url
dahil) sağlayan bir dizi olan related_applications
özelliğini içermelidir.
platform
,webapp
olmalıdır- PWA'nızın web uygulaması manifest dosyasına giden tam yol
url
şeklindedir.
{
"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()
çağrısı yapın.
Demoyu deneyin
getinstallRelatedApps() çağrısı
navigator.getInstalledRelatedApps()
çağrısı, kullanıcının cihazında yüklü olan bir dizi uygulama ile çözümlenen bir vaadi döndürür.
const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
console.log(app.id, app.platform, app.url);
});
Sitelerin kendi uygulamalarını çok geniş bir grup halinde 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 benzer soruları olanların olup olmadığını görmek için StackOverflow'daki getInstalledRelatedApps
etiketini kontrol edin. Aksi takdirde sorunuzu orada sorun ve progressive-web-apps
etiketiyle etiketlediğinizden emin olun. Ekibimiz bu etiketi sık sık
takip eder ve sorularınızı yanıtlamaya çalışır.
Geri bildirim
Chrome'un uygulamasında bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı?
- https://new.crbug.com adresinden hata bildiriminde bulunun. Mümkün olduğunca fazla ayrıntı ekleyin, hatayı yeniden oluşturmaya ilişkin basit talimatları sağlayın ve Bileşenler kutusuna
Mobile>WebAPKs
yazın. Glitch hızlı ve kolay yeniden oluşturmalar paylaşmak için idealdir.
API'ye desteği gösterin
getInstalledRelatedApps()
API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chrome ekibinin özellikleri öncelik sırasına koymasına yardımcı olur ve diğer tarayıcı satıcılarına onları desteklemenin ne kadar kritik olduğunu gösterir.
- API'yi nasıl kullanmayı planladığınızı WICG Discourse ileti dizisinde paylaşın.
#getInstalledRelatedApps
hashtag'ini kullanarak @ChromiumDev adresine tweet gönderip bu tweet'i nerede ve nasıl kullandığınızı bize bildirin.
Faydalı bağlantılar
getInstalledRelatedApps()
API için herkese açık açıklayıcı- Spesifikasyon taslağı
- İzleme hatası
- ChromeStatus.com girişi
- Yanıp Sönen Bileşen:
Mobile>WebAPKs
Teşekkür ederiz
Windows uygulamalarını test etme konusundaki ayrıntılara yardımcı olduğu için Microsoft'tan Sunggook Chue ve Chrome ayrıntılarıyla ilgili Ryan Kanso'ya özel teşekkür ederiz.