Uygulamanız yüklü mü? Get Installed Related Apps API ile öğrenebilirsiniz.

Pete LePage

Alexey Rodionov

Get Installed Related Apps API, yüklü ilgili uygulamaların listesini ve bu uygulamalarla ilgili ayrıntıları almanıza olanak tanır.

Progresif web uygulamanızın (PWA), Android uygulamanızın veya Evrensel Windows Platformu (UWP) uygulamanızın mevcut cihaza yüklenip yüklenmediğini hem PWA'nın kendisinden hem de ilgili bir web sayfasından (ör. ürün pazarlama web sitesi) kontrol etmenizi sağlar.

Bubblewrap, Node.js için açık kaynaklı bir kitaplıklar grubu ve komut satırı aracıdır (KSA). Bubblewrap, geliştiricilerin PWA'nızı Güvenilir Web Etkinliği (TWA) olarak başlatan bir Android projesi oluşturmasına, derlemesine ve imzalamasına yardımcı olmak için Google Chrome ekibi tarafından geliştirilmiştir.

PWABuilder, Microsoft tarafından geliştirilen bir açık kaynak projesidir. Geliştiriciler, PWABuilder'ı kullanarak PWA'larının URL'sini girip uygulamanın meta verilerini girerek/düzenleyerek ve Oluştur düğmesini tıklayarak PWA'larını paketleyip imzalayabilir ve Microsoft Store, Google Play Store, App Store ve Meta Quest Store gibi çeşitli mağazalarda yayınlayabilir.

PWABuilder, Android ve ChromeOS için PWA'ları paketlemek üzere arka planda Bubblewrap'i kullanır.

Uygulama zaten yüklüyse kullanıcı deneyimini özelleştirebilirsiniz.

Örneğin:

• Diğer uygulamanız zaten yüklüyse PWA'nızın yüklenmesini teşvik etmez.
• Kullanıcıyı bir ürün pazarlama web sitesinden doğrudan uygulamanıza yönlendirme.
• Yinelenen bildirimleri önlemek için bildirimler gibi bazı işlevleri diğer uygulamada merkezileştirme

Get Installed Related Apps API'yi kullanmak için önce uygulamanıza sayfanız hakkında bilgi vermeniz, ardından sayfanıza uygulamanız hakkında bilgi vermeniz gerekir. İkisi arasındaki ilişkiyi tanımladıktan sonra ilgili uygulamanın yüklü olup olmadığını kontrol edebilirsiniz.

Sitelerin kendi uygulamalarının çok geniş bir grubunu test etmesini önlemek için yalnızca web uygulaması manifestinde belirtilen ilk üç uygulama dikkate alınır.

Diğer birçok güçlü web API'si gibi, Get Installed Related Apps API de yalnızca HTTPS üzerinden sunulduğunda kullanılabilir.

Get Installed Related Apps API nedir?

Asenkron navigator.getInstalledRelatedApps() yöntemini çağırmak, aşağıdakilerle ilgili ayrıntıları içeren bir nesne dizisiyle çözümlenen bir söz döndürür:

• Mevcut cihaza yüklenmişse,
• web uygulaması manifestinin related_applications alanında tanımlanmış olmalıdır.
• navigator.getInstalledRelatedApps() yönteminin çağrıldığı bir sayfayla doğrulanmış bir ilişkiye sahip olmalıdır (ayrıntılar için sonraki bölümlere bakın).

const installedRelatedApps = await navigator.getInstalledRelatedApps?.();

Calling console.log(installedRelatedApps), aşağıdakine benzer bir sonuç döndürür:

[
  {
    platform: "webapp",
    id: "https://example.com/?utm_source=home_screen",
    url: "https://example.com/manifest.json"
  },
  {
    platform: "play",
    id: "com.example.twa",
    url: "https://play.google.com/store/apps/details?id=com.example.twa",
    version: "0.1.0"
  }
]

Örneğin, kullanıcının cihazında ilgili uygulamaların yüklü olup olmadığını kontrol etmek için aşağıdaki tek satırlık kodu kullanabilirsiniz:

const hasInstalledRelatedApps = !!(await navigator.getInstalledRelatedApps?.())?.length;

Paket kimliğini biliyorsanız yüklü ilgili Android uygulamasının sürüm numarasını almak için aşağıdaki tek satırlık kodu kullanabilirsiniz:

const installedRelatedAndroidAppVersion = (await navigator.getInstalledRelatedApps?.())?.find(app => app.id === 'com.example.twa')?.version;

Bu nedenle, navigator.getInstalledRelatedApps() yöntemi, sürümü min_version değerinden düşük olsa veya imzalama sertifikası, web uygulaması manifestinin related_applications alanında belirtilen fingerprints değerleriyle eşleşmese bile yüklü ilgili uygulamaları döndürmeye devam eder.

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.

Yalnızca 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. Bu, Android uygulamanızın yüklü olup olmadığını yalnızca web sitenizin kontrol edebilmesini sağlar.

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 ekleyin ve site yerine alanınızı girin. Kaçış 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ıktan sonra güncellenen uygulamayı cihaza yükleyin veya Google Play Store'da ya da diğer Android uygulama dağıtım platformlarında yayınlayın.

Web sitenize Android uygulamanız hakkında bilgi verme

Ardından, sayfanıza web uygulaması manifesti ekleyerek web sitenize Android uygulamanız hakkında bilgi verin. Manifest, related_applications ve id dahil olmak üzere uygulamanızla ilgili ayrıntıları sağlayan bir dizi olan related_applications özelliğini içermelidir.platform

• platform, play olmalıdır
• id, Android paket kimliğidir.

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

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

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

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.

Yalnızca Windows: Chrome 85 veya sonraki sürümler, Edge 85 veya sonraki sürümler

Windows uygulamanıza web siteniz hakkında bilgi verme

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

Windows.appUriHandler uzantı kaydını uygulamanızın manifest dosyasına ekleyin Package.appxmanifest. Ö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 gerekebilir.

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ı girin. Bu dosyayı sunucunuzun kök dizinine veya /.well-known/ dizinine yerleştirin. Paket aile adını, uygulama manifest tasarımcısındaki Paketleme bölümünde bulabilirsiniz.

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

URI işleyicilerini ayarlama hakkında ayrıntılı bilgi için Uygulama URI işleyicilerini kullanarak web siteleri için uygulamaları etkinleştirme başlıklı makaleyi inceleyin.

Web sitenize Windows uygulamanız hakkında bilgi verme

Ardından, sayfanıza web uygulaması manifesti ekleyerek web sitenize Windows uygulamanız hakkında bilgi verin. Manifest, uygulamanızla ilgili ayrıntıları sağlayan bir dizi olan related_applications özelliğini içermelidir. Bu ayrıntılar arasında platform ve id yer alır.

• platform, windows olmalıdır
• id, uygulamanızın paket ailesi adıdır ve Package.appxmanifest dosyanızdaki <Application> Id değeri eklenir.

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

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

Son olarak, Windows uygulamanızın yüklü olup olmadığını kontrol etmek için navigator.getInstalledRelatedApps() adlı asenkron işlevi çağırın.

Bu demoya göz atın.

Aşamalı web uygulamanızın zaten yüklü olup olmadığını (kapsam dahilinde) kontrol edin

PWA'nızın daha önce yüklenip yüklenmediğini kontrol edebilirsiniz. Bu durumda, isteği yapan sayfa aynı alanda olmalı ve web uygulaması manifestosundaki kapsam tanımına göre PWA'nızın kapsamında yer almalıdır.

Desteklendiği yerler:

Android: Chrome 84 veya sonraki sürümler

Masaüstü (Windows, macOS, Linux, ChromeOS): Chrome 140 veya sonraki bir sürümü, Edge 140 veya sonraki bir sürümü

PWA'nıza kendisi hakkında bilgi verme

PWA'nızın web uygulaması manifestine bir related_applications girişi ekleyerek PWA'nız hakkında bilgi verin.

• platform, webapp olmalıdır
• url, PWA'nızın web uygulaması manifestinin yolu (göreceli olabilir)
• id, web uygulaması manifestosunun id alanında belirtilen veya tarayıcı tarafından hesaplanan web uygulaması kimliğidir (masaüstü için gereklidir, Android için gerekli değildir).

{
  …
  "scope": "/",
  "start_url": "/?utm_source=home_screen",
  "related_applications": [{
    "platform": "webapp",
    "url": "/manifest.json",
    "id": "https://example.com/?utm_source=home_screen"
  }],
  …
}

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 eşzamansız navigator.getInstalledRelatedApps() işlevini çağırın. navigator.getInstalledRelatedApps(), PWA'nızın kapsamı dışında çağrılırsa [] döndürülür. Ayrıntılar için sonraki bölüme bakabilirsiniz.

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

Web siteniz, sayfa PWA'nızın kapsamı dışında olsa bile PWA'nızın yüklü olup olmadığını kontrol edebilir. Örneğin, /landing/ adresinden sunulan bir açılış sayfası, /pwa/ adresinden sunulan PWA'nın yüklü olup olmadığını veya açılış sayfanızın www.example.com adresinden, PWA'nızın ise app.example.com adresinden sunulup sunulmadığını kontrol edebilir.

Desteklendiği yerler:

Yalnızca 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şkiyi tanımlamaya yardımcı olur ve PWA'nızın yüklü olup olmadığını yalnızca web sitenizin kontrol edebileceğini doğrular.

PWA'nın bulunduğu alanın /.well-known/ dizinine bir assetlinks.json dosyası ekleyin (örneğin, app.example.com). site mülkünde, kontrolü gerçekleştirecek web uygulaması manifestinin tam yolunu (PWA'nızın web uygulaması manifesti 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"
    }
  }
]

Ardından, sayfanıza web uygulaması manifesti ekleyerek web sitenize PWA uygulamanız hakkında bilgi verin. Manifest dosyasında, related_applications özelliği (platform ve url dahil olmak üzere PWA'nızla ilgili ayrıntıları sağlayan bir dizi) bulunmalıdır.

• platform, webapp olmalıdır
• url, 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() asenkron işlevini çağırın.

Başka sorularınız mı var?

Başka sorularınız mı var? Başka bir kullanıcının benzer soruları olup olmadığını görmek için StackOverflow'daki getInstalledRelatedApps etiketine göz atın. Aksi takdirde, sorunuzu orada sorun ve progressive-web-apps etiketiyle etiketlediğinizden emin olun. Ekibimiz bu etiketi sık sık izler ve 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. Mümkün olduğunca fazla ayrıntı ekleyin, hatanın yeniden üretilmesiyle ilgili talimatları verin ve Components (Bileşenler) kutusuna Mobile>WebAPKs girin.

Faydalı bağlantılar

• Get Installed Related Apps API'si için herkese açık açıklayıcı
• Spec draft
• İzleme hatası
• ChromeStatus.com girişi
• Blink Bileşeni: Mobile>WebAPKs

Teşekkürler

Windows uygulamalarını test etme ayrıntıları konusunda yardımcı olan Microsoft'tan Sunggook Chue'ya ve Chrome ayrıntıları konusunda yardımcı olan Rayan Kanso'ya teşekkür ederiz.