Uygulamanız yüklü mü? getInstallInstallRelatedApps() bunu size bildirir!

getInstalledRelatedApps() yöntemi, web sitenizin iOS/Android/masaüstü uygulamanız veya PWA'nız kullanıcının cihazında yüklüyse.

Pete LePage

getYükleRelatedApps() API'sı nedir?

getInstalledRelatedApps(), sayfanızın şunları yapmasını sağlar: kendi mobil uygulamanızın mı yoksa masaüstü uygulamanızın mı yoksa bazı durumlarda Progresif Web Uygulaması (PWA) kullanıcının cihazında yüklüdür ve şunları yapmanıza olanak tanır: kullanıcı deneyimini özelleştirebilirsiniz.

Örneğin, uygulamanız zaten yüklüyse:

• Kullanıcıyı bir ürün pazarlama sayfasından doğrudan uygulamanıza yönlendirme.
• Diğer uygulamadaki bildirimler gibi bazı işlevleri merkezileştirerek yinelenen bildirimleri önler.
• Aşağıdaki şartları karşılıyorsanız PWA'nızın yüklemesini tanıtmamalısınız: diğer uygulama zaten yüklü.

getInstalledRelatedApps() API'yi kullanmak için uygulamanıza ve ardından sitenize uygulamanızdan bahsedin. Projeyi tanımladıktan sonra uygulamanın yüklü olup olmadığını kontrol edebilirsiniz.

Kontrol edebileceğiniz desteklenen uygulama türleri

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 uygulamanıza web sitenizi anlatın

Öncelikle, bu ilişkiyi tanımlamak için Android uygulamanızı güncellemeniz gerekir web siteniz ve Android uygulamanız arasında Dijital Öğe Bağlantıları sistemi. Bu yalnızca sizin Android uygulamanızın yüklü olup olmadığını kontrol edebilir.

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

<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ız. Çıkış karakterlerini eklemeyi unutmayın.

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

Tamamlandıktan sonra, güncellenmiş Android uygulamanızı Play Store'da yayınlayın.

Web sitenize Android uygulamanız hakkında bilgi verin

Ardından, web sitenize Android uygulamanızdan bahsedin. bir web uygulaması manifest dosyası ekleyebilirsiniz. Manifest dosyası ayrıntıları sağlayan bir dizi olan related_applications özelliğini içermelidir platform ve id dahil uygulamanızla ilgili.

• platform, play olmalıdır
• id, 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, navigator.getInstalledRelatedApps() ile iletişime geçerek Android uygulaması yüklendi.

Demoyu deneyin

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

Web siteniz, Windows uygulamanızın (UWP kullanılarak oluşturulan) yüklü olup olmadığını kontrol edebilir.

Windows uygulamanıza web sitenizi bildirme

Uygulamanız arasındaki ilişkiyi tanımlamak için Windows uygulamanızı güncellemeniz gerekir. URI İşleyicilerini kullanarak web sitesi ve Windows uygulaması. Bu yalnızca web sitenizin Windows uygulamanızın yüklü olup olmadığını kontrol etmesini sağlar.

Windows.appUriHandler uzantısı kaydını uygulamanızın manifest dosyasına ekleyin Package.appxmanifest dosyası Örneğin, web sitenizin adresi example.com 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>

uap3 ad alanını <Package> özelliği için geçerlidir.

Ardından, adlı bir JSON dosyası (.json dosya uzantısı olmadan) oluşturun windows-app-web-link ve uygulamanızın paket aile adını belirtin. Yer bu dosyayı sunucu kökünüzde veya /.well-known/ dizininde bulabilirsiniz. Siz paket ailesinin adını uygulama manifest'inin Paketleme bölümünde bulabilirsiniz tasarımcıyım.

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

Uygulama URI işleyicileri kullanan web siteleri için uygulamaları etkinleştirme başlıklı makaleye göz atın. URI işleyicilerini ayarlama hakkında ayrıntılı bilgi edinin.

Web sitenize Windows uygulamanız hakkında bilgi verme

Ardından, aşağıdaki adımları izleyerek web sitenize Windows uygulamanızdan bahsedin: bir web uygulaması manifest dosyası ekleyebilirsiniz. Manifest dosyası ayrıntıları sağlayan bir dizi olan related_applications özelliğini ekleyin platform ve id dahil uygulamanızla ilgili.

• platform, windows olmalıdır
• id, uygulamanızın paket ailesidir (<Application> Id ile eklenir) değerini Package.appxmanifest dosyanıza ekleyin.

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

Uygulamanızın yüklü olup olmadığını kontrol etme

Son olarak, navigator.getInstalledRelatedApps() ile iletişime geçerek Windows uygulaması yüklendi.

Progresif web uygulamanızın zaten yüklü olup olmadığını kontrol etme (kapsam kapsamında)

PWA'nız uygulamanın zaten yüklü olup olmadığını kontrol edebilir. Bu durumda, sayfa istekte bulunmak aynı alanda ve kapsam dahilinde olmalıdır. (web uygulaması manifest'inde kapsamda tanımlandığı şekilde) oluşturmanız gerekir.

PWA'nıza (progresif web uygulaması) kendisinden bahsedin

PWA'nıza (Progresif Web Uygulaması) related_applications giriş ekleyerek PWA web uygulaması manifesti.

• platform, webapp olmalıdır
• url, PWA'nızın web uygulaması manifestine giden tam yoldur

{
  …
  "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, navigator.getInstalledRelatedApps() adlı kullanıcıyı PWA'nızın kapsamını inceleyin. Eğer getInstalledRelatedApps(), PWA'nızın kapsamı dışında çağrıldığında Return false. 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 dışında olsa bile PWA'nızın yüklü olup olmadığını kontrol edebilir PWA'nızın kapsamı. Örneğin, /landing/, /pwa/ üzerinden sunulan PWA'nın yüklü olup olmadığını veya açılış sayfası www.example.com ve PWA'nız app.example.com.

PWA'nıza web siteniz hakkında bilgi verin

Öncelikle, PWA'nızın bulunduğu sunucuya dijital varlık bağlantılarını eklemeniz gerekir. yayınlandığına dikkat edin. Bu, web siteniz ile web siteniz arasındaki ilişkiyi tanımlamaya yardımcı olur. hazırlar ve PWA'nızın yüklü olup olmadığını yalnızca web sitenizin kontrol etmesini sağlar.

/.well-known/ dizinine bir assetlinks.json dosyası ekleyin PWA'nın bulunduğu alanın, örneğin app.example.com. site içinde web uygulaması manifest'inin tam yolunu girin ve kontrolü (PWA'nızın web uygulaması manifesti 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 sitenize PWA'nız hakkında bilgi verin

Ardından, web sitenize PWA uygulamanızdan bahsedin. bir web uygulaması manifest dosyası ekleyebilirsiniz. Manifest dosyası ayrıntıları sağlayan bir dizi olan related_applications özelliğini içermelidir PWA'nız hakkında (platform ve url dahil).

• platform, webapp olmalıdır
• url, PWA'nızın web uygulaması manifestine giden tam yoldur

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

PWA'nızın yüklü olup olmadığını kontrol etme

Son olarak, navigator.getInstalledRelatedApps() ile iletişime geçerek PWA yüklendi.

Demoyu deneyin

getYüklenen AlakalıApps() çağrısı

navigator.getInstalledRelatedApps() çağrısı yapıldığında, kullanıcının cihazında yüklü uygulamalarınızla çözümlenir.

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

Sitelerin kendilerine ait aşırı geniş bir grup uygulamayı test etmesini önlemek için yalnızca web uygulaması manifest'inde belirtilen ilk üç uygulama hesaba katar.

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? StackOverflow'da getInstalledRelatedApps etiketini kontrol edin ve benzer soruları olup olmadığını kontrol edin. Yoksa soru ekleyin ve bu soruyu progressive-web-apps etiketi. Ekibimiz sık sık bu etiketi kullanarak sorularınızı yanıtlamaya çalışır.

Geri bildirim

Chrome'un uygulanmasıyla ilgili bir hata buldunuz mu? Yoksa ve spesifikasyondan farklı mı?

• https://new.crbug.com adresinden hata bildiriminde bulunun. Olabildiğince çok dahil et ve hatayı yeniden oluşturmak için basit talimatlar sağlayın ve Bileşenler kutusuna Mobile>WebAPKs yazın. Aksak hızlı ve kolay yeniden oluşturmalar paylaşmak için harika bir seçenektir.

API'ye desteğinizi gösterin

getInstalledRelatedApps() API'yi kullanmayı planlıyor musunuz? Herkese açık desteği, Chrome ekibinin özellikleri öncelik sırasına koymasına yardımcı olur ve diğer kritik önem taşır.

• API'yi nasıl kullanmayı planladığınızı WICG Discourse ileti dizisinde paylaşın.
• Hashtag'i kullanarak @ChromiumDev hesabına tweet gönderin #getInstalledRelatedApps ve nerede ve nasıl kullandığınızı bize bildirin.

Faydalı bağlantılar

• getInstalledRelatedApps() API için genel açıklama
• Spesifikasyon taslağı
• Hata izleme
• ChromeStatus.com girişi
• Blink Bileşeni: Mobile>WebAPKs

Teşekkürler

Ayrıntılar konusunda yardımcı olduğu için Microsoft'tan Sunggook Chue'a özel teşekkürler için Google Chrome'u, Chrome ayrıntılarıyla ilgili yardım almak içinse Rayan Kanso'yu ziyaret edin.