Uygulamanız yüklü mü? getInstalledRelatedApps() size söyleyecektir!

getInstalledRelatedApps() API’si nedir? #

bu getInstalledRelatedApps() için mümkün kılar senin olup olmadığını kontrol etmek için sayfa senin mobil veya masaüstü uygulaması veya bazı durumlarda, Aşamalı Web Uygulamanız (PWA) bir kullanıcının cihazında zaten yüklüyse 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üklenmesini teşvik etmemek.

kullanmak için getInstalledRelatedApps() API, uygulamanıza sitenizden bahsetmeniz, ardından sitenize uygulamanızdan bahsetmeniz gerekir. İkisi arasındaki ilişkiyi tanımladıktan sonra, uygulamanın yüklenip yüklenmediğini kontrol edebilirsiniz.

Kontrol edebileceğiniz desteklenen uygulama türleri #

Android uygulamanızın yüklü olup olmadığını kontrol edin #

Web siteniz, Android uygulamanızın kurulu olup olmadığını kontrol edebilir.

Desteklenen

Android: Chrome 80 veya üstü

Android uygulamanıza web sitenizden bahsedin #

Öncelikle, web siteniz ve Android uygulamanız arasındaki ilişkiyi tanımlamak için Android uygulamanızı güncellemeniz gerekir. Dijital Varlık Bağlantıları sistemi. Bu, Android uygulamanızın yüklü olup olmadığını yalnızca web sitenizin kontrol edebilmesini sağlar.

İçinde AndroidManifest.xml Android uygulamanızın bir asset_statements giriş:

manifest>
application>
…
meta-data android:name="asset_statements" android:resource="scottystringfiel/asset_statements" />
…
&LT/application>
&LT/manifest>

Daha sonra strings.xmlaşağıdaki varlık bildirimini ekleyin, güncelleyin site . Kaçan karakterleri eklediğinizden emin olun.

string name="asset_statements">
[{
\"relation\": [\"delegate_permission/common.handle_all_urls\"],
\"target\": {
\"namespace\": \"web\",
\"site\": \"https://example.com\"
}
}]
&LT/string>

Tamamlandığında, güncellenmiş Android uygulamanızı Play Store’da yayınlayın.

Web sitenize Android uygulamanızdan bahsedin #

Ardından, sayfanıza bir web uygulaması bildirimi ekleyerek web sitenize Android uygulamanızdan bahsedin. Manifesto şunları içermelidir: related_applications dahil olmak üzere uygulamanızla ilgili ayrıntıları sağlayan bir dizi özelliği platform Ve id.

• platform olmalıdır play
• id Android uygulamanız için GooglePlay uygulama kimliğidir

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

Uygulamanızın yüklü olup olmadığını kontrol edin #

Son olarak, ara navigator.getInstalledRelatedApps() Android uygulamanızın yüklü olup olmadığını kontrol etmek için.

deneyin gösteri

Windows (UWP) uygulamanızın yüklü olup olmadığını kontrol edin #

Web siteniz, Windows uygulamanızın (UWP kullanılarak oluşturulmuş) kurulu olup olmadığını kontrol edebilir.

Desteklenen

Windows: Chrome 85 veya üstü, Edge 85 veya üstü

Windows uygulamanıza web siteniz hakkında bilgi verin #

Web siteniz ve Windows uygulamanız arasındaki ilişkiyi tanımlamak için Windows uygulamanızı güncellemeniz gerekir. URI İşleyicileri. Bu, Windows uygulamanızın yüklü olup olmadığını yalnızca web sitenizin kontrol edebilmesini sağlar.

Ekle Windows.appUriHandler uygulamanızın bildirim dosyasına uzantı kaydı Package.appxmanifest. Örneğin, web sitenizin adresi ise example.com uygulamanızın manifest dosyasına şu girişi eklersiniz:

Applications>
Application Id="App" ... >
...
Extensions>
uap3:Extension Category="windows.appUriHandler">
uap3:AppUriHandler>
uap3:Host Name="example.com" />
&LT/uap3:AppUriHandler>
&LT/uap3:Extension>
&LT/Extensions>
&LT/Application>
&LT/Applications>

Not, eklemeniz gerekebilir uap3 ad alanı senin için &LTPackage> bağlanmak.

Ardından, bir JSON dosyası oluşturun (olmadan .json dosya uzantısı) adlı windows-app-web-link ve uygulamanızın paket aile adını sağlayın. Bu dosyayı sunucu köküne veya /.well-known/ dizin. Paket aile adını, uygulama bildirim tasarımcısındaki Paketleme bölümünde bulabilirsiniz.

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

Görmek Uygulama URI işleyicilerini kullanan web siteleri için uygulamaları etkinleştirin URI işleyicilerini ayarlamayla ilgili tüm ayrıntılar için.

Web sitenize Windows uygulamanız hakkında bilgi verin #

Ardından, sayfanıza bir web uygulaması bildirimi ekleyerek web sitenize Windows uygulamanızdan bahsedin. Manifesto şunları içermelidir: related_applications dahil olmak üzere uygulamanızla ilgili ayrıntıları sağlayan bir dizi özelliği platform Ve id.

• platform olmalıdır windows
• id tarafından eklenen uygulamanızın paket aile adıdır. &LTApplication> Id senin içindeki değer Package.appxmanifest dosya.

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

Uygulamanızın yüklü olup olmadığını kontrol edin #

Son olarak, ara navigator.getInstalledRelatedApps() Windows uygulamanızın yüklü olup olmadığını kontrol etmek için.

Aşamalı Web Uygulamanızın zaten kurulu olup olmadığını kontrol edin (kapsam dahilinde) #

PWA’nız zaten kurulu olup olmadığını kontrol edebilir. Bu durumda, istekte bulunan sayfa aynı etki alanında ve web uygulaması bildiriminde kapsam tarafından tanımlandığı şekilde PWA’nızın kapsamında olmalıdır.

Desteklenen

Android: Chrome 84 veya üstü

PWA’nıza kendisinden bahsedin #

Bir ekleyerek PWA’nıza kendisinden bahsedin. related_applications PWAs web uygulaması bildiriminizdeki giriş.

• platform olmalıdır webapp
• url PWA’nızın web uygulaması bildirimine giden tam yoldur

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

PWA’nızın kurulu olup olmadığını kontrol edin #

Son olarak, ara navigator.getInstalledRelatedApps() yüklü olup olmadığını kontrol etmek için PWA’nızın kapsamından. Eğer getInstalledRelatedApps() PWA’nızın kapsamı dışında çağrıldığında false döndürür. Ayrıntılar için bir sonraki bölüme bakın.

deneyin gösteri

Aşamalı Web Uygulamanızın kurulu olup olmadığını kontrol edin (kapsam dışı) #

Sayfa PWA’nızın kapsamı dışında olsa bile web siteniz PWA’nızın kurulu olup olmadığını kontrol edebilir. Örneğin, şu adresten sunulan bir açılış sayfası: /landing/ PWA’nın şu adresten sunulup sunulmadığını kontrol edebilir: /pwa/ yüklüyse veya açılış sayfanız şu adresten sunuluyorsa: www.example.com ve PWA’nız şu adresten sunulur: app.example.com.

Desteklenen

Android: Chrome 84 veya üstü

PWA’nıza web sitenizden bahsedin #

Öncelikle, PWA’nızın sunulduğu sunucuya dijital varlık bağlantıları eklemeniz gerekir. Bu, web siteniz ile PWA’nız arasındaki ilişkiyi tanımlamanıza yardımcı olur ve PWA’nızın yüklü olup olmadığını yalnızca web sitenizin kontrol etmesini sağlar.

ekle assetlinks.json dosyaya /.well-known/ PWA’nın yaşadığı etki alanının dizini, örneğin app.example.com. İçinde site özelliği, kontrolü gerçekleştirecek web uygulaması bildiriminin (PWA’nızın web uygulaması bildiriminin değil) tam yolunu sağlar.

// 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ı bildirimi ekleyerek web sitenize PWA uygulamanızdan bahsedin. Manifesto şunları içermelidir: related_applications özelliği, dahil olmak üzere PWA’nız hakkında ayrıntıları sağlayan bir dizi platform Ve url.

• platform olmalıdır webapp
• url PWA’nızın web uygulaması bildirimine giden tam yoldur

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

PWA’nızın kurulu olup olmadığını kontrol edin #

Son olarak, ara navigator.getInstalledRelatedApps() PWA’nızın kurulu olup olmadığını kontrol etmek için.

deneyin gösteri

getInstalledRelatedApps() çağrılıyor #

arama navigator.getInstalledRelatedApps() kullanıcının cihazında yüklü olan bir dizi uygulamanızla çözülen bir söz verir.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
console.log(app.id, app.platform, app.url);
});

Sitelerin kendi uygulamalarının aşırı geniş bir grubunu test etmesini önlemek için yalnızca web uygulaması bildiriminde bildirilen ilk üç uygulama dikkate alınacaktır.

Diğer birçok güçlü web API’si gibi, getInstalledRelatedApps() API yalnızca üzerinden sunulduğunda kullanılabilir HTTPS.

Hala sorularınız mı var? #

Hala sorularınız mı var? kontrol et getInstalledRelatedApps StackOverflow’ta etiket Başka birinin benzer soruları olup olmadığını görmek için. Değilse, sor soru orada ve şununla etiketlediğinizden emin olun: progressive-web-apps etiket. Ekibimiz sık sık bu etiketi izler ve sorularınızı yanıtlamaya çalışır.

Geri bildirim #

Chrome’un uygulamasında bir hata mı buldunuz? Yoksa uygulama spesifikasyondan farklı mı?

• Şu adrese bir hata bildirin: https://new.crbug.com. Olabildiğince fazla ayrıntı ekleyin, hatayı yeniden oluşturmak için basit talimatlar verin ve girin Mobile>WebAPKs içinde Bileşenler kutu. Kusur hızlı ve kolay çoğaltmaları paylaşmak için harika çalışıyor.

API desteğini göster #

kullanmayı planlıyor musunuz? getInstalledRelatedApps() API? Herkese açık desteğiniz, Chrome ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı satıcılarına bunları desteklemenin ne kadar önemli olduğunu gösterir.

Faydalı Bağlantılar #

Teşekkürler #

Microsoft’tan Sunggook Chue’ya Windows uygulamalarını test etmeyle ilgili ayrıntılar konusunda yardımcı olduğu için ve Rayan Kanso’ya Chrome ayrıntılarıyla ilgili yardımları için özel teşekkürler.