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.

Not: Bunlar yalnızca yerel Android uygulamaları veya Evrensel Windows Platformu (UWP) uygulamaları değil, aynı zamanda Bubblewrap ve PWABuilder kullanılarak paketlenmiş PWA'lar da olabilir.

Bubblewrap, Node.js için açık kaynaklı bir kitaplık seti ve komut satırı aracıdır (CLI). Bubblewrap, geliştiricilerin PWA'nızı güvenilir web etkinliği (TWA) olarak başlatacak 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ştiricilerin, PWA'larının URL'sini girerek, uygulamanın meta verilerini girerek/düzenleyerek ve Oluştur düğmesini tıklayarak Microsoft Store, Google Play Store, App Store ve Meta Quest Store gibi çeşitli mağazalarda yayınlanmak üzere paketleyip imzalamasına olanak tanır.

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

Not: Get Installed Related Apps API yalnızca uygulamalarınızın yüklü olup olmadığını kontrol etmenize olanak tanır. Yüklü tüm uygulamaların listesini alamaz veya diğer üçüncü taraf uygulamalarının yüklü olup olmadığını kontrol edemezsiniz.

Yüklü İlgili Uygulamaları Al API'sini kullanmak için uygulamanıza sayfanızdan, sayfanıza da uygulamanızdan bahsetmeniz gerekir. İkisi arasında doğrulanmış ilişki tanımladıktan sonra ilgili uygulamanın yüklü olup olmadığını kontrol edebilirsiniz.

Sitelerin kendi uygulamalarından oluşan ç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ğunda olduğu gibi, Yüklü İlgili Uygulamaları Al API'si yalnızca HTTPS üzerinden sunulduğunda kullanılabilir.

Get Installed Related Apps API nedir?

Asenkron navigator.getInstalledRelatedApps() yöntemini çağırmak, aşağıdakileri içeren uygulamalarla ilgili ayrıntıları içeren bir nesne dizisiyle çözümlenen bir promise 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?.();

console.log(installedRelatedApps) ile arama yapıldığında aşağıdaki gibi bir sonuç döndürülü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;

Not: min_version ve fingerprints alanları spesifikasyonun bir parçasıdır ancak destekleri hiçbir platformda hiçbir tarayıcıda uygulanmamıştır.

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

Uygulama türü	Checkable
Android uygulaması	Yalnızca Android: Chrome 80 veya sonraki sürümler
Evrensel Windows Platformu (UWP) uygulaması	Yalnızca Windows: Chrome 85 veya sonraki sürümler Edge 85 veya sonraki sürümler
Aynı kaynakta aynı kapsamda yüklenen Progresif Web Uygulaması (PWA)	Android: Chrome 84 veya sonraki sürümler Masaüstü (Windows, macOS, Linux, ChromeOS): Chrome 140 veya sonraki sürümler Edge 140 veya sonraki sürümler
Aynı veya farklı kaynakta farklı kapsamda yüklenen Progresif Web Uygulaması (PWA)	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.

Not: Bubblewrap veya PWABuilder kullanılarak paketlenmiş bir PWA olabilir. Bu PWA, Android uygulaması olarak Güvenilir Web Etkinliği (TWA) olarak başlatılır.

Desteklenen cihazlar:

• 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 doğrulanmış ilişkiyi tanımlamak için Android uygulamanızı güncellemeniz gerekir. Bu, Android uygulamanızın yüklenip yüklenmediğini 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 ifadesini 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>

Uzman ipucu: Bu bir dizidir. Bu, Android uygulamanız ile birden fazla web siteniz arasında doğrulanmış bir ilişki tanımlayabileceğiniz anlamına gelir.

İş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.

Not: Bubblewrap ve PWABuilder, daha önce açıklanan uygulamada gerekli tüm değişiklikleri sizin için otomatik olarak yapar.

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 özelliğini içermelidir. Bu özellik, platform ve id dahil olmak üzere uygulamanızla ilgili ayrıntıları sağlayan bir dizidir.

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

{
  ...
  "related_applications": [
    {
      "platform": "play",
      "id": "com.example.twa"
    }
  ]
  ...
}

Uzman ipucu: Bu bir dizidir. Bu sayede, web siteniz ile Android uygulamalarınızdan birden fazla uygulama arasında doğrulanmış bir ilişki tanımlayabilirsiniz.

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 eşzamansız 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.

Not: PWABuilder kullanılarak paketlenmiş ve PWA'nızı başlatan bir Evrensel Windows Platformu (UWP) uygulaması olabilir.

Desteklenen cihazlar:

• 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

URI işleyicilerini kullanarak web siteniz ile Windows uygulamanız arasındaki doğrulanmış ilişkiyi 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 AppxManifest.xml veya 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 gerekebilir.

Web sitenizin birden fazla adresi varsa her adres için <uap3:Host Name=... /> öğesinin içine ayrı bir <uap3:AppUriHandler> girişi ekleyin.

Not: PWABuilder, Uygulama URI işleyicisini etkinleştir onay kutusu işaretli kalırsa (varsayılan olarak işaretlidir) daha önce açıklanan uygulamada gerekli tüm değişiklikleri sizin için otomatik olarak yapar.

Ardından, windows-app-web-link adlı bir JSON dosyası (.json dosya uzantısı olmadan) oluşturun ve uygulamanızın Paket Ailesi Adı'nı girin. Bu dosyayı /.well-known/ dizinine veya sunucunuzun kök dizinine yerleştirin.

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

Uzman ipucu: Bu bir dizidir. Bu sayede, web siteniz ile birden fazla Windows uygulamanız arasında doğrulanmış bir ilişki tanımlayabilirsiniz.

Paket Ailesi Adı'nı öğrenmek için uygulamayı yükleyebilir, PowerShell'de aşağıdaki komutu çalıştırabilir ve listede uygulamanızı bulabilirsiniz:

Get-AppxPackage | Select-Object PackageFamilyName

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, related_applications özelliğini içermelidir. Bu özellik, platform ve id dahil olmak üzere uygulamanızla ilgili ayrıntıları sağlayan bir dizidir.

• platform, windows olmalıdır
• id, uygulamanızın Paket Ailesi Adı'dır ve sonuna !App eklenmiştir.

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

Uzman ipucu: Bu bir dizidir. Bu sayede, web siteniz ile birden fazla Windows uygulamanız arasında doğrulanmış bir ilişki tanımlayabilirsiniz.

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() eşzamansız işlevini ç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.

Desteklenen cihazlar:

• 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öreli 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 işlevi navigator.getInstalledRelatedApps() ç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/ alanından sunulan bir açılış sayfası, /pwa/ alanından sunulan PWA'nın yüklü olup olmadığını veya açılış sayfanızın www.example.com alanından, PWA'nızın ise app.example.com alanından sunulup sunulmadığını kontrol edebilir.

Desteklenen cihazlar:

• 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 doğrulanmış ilişkiyi tanımlamaya yardımcı olur ve yalnızca web sitenizin PWA'nızın yüklü olup olmadığını 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"
    }
  }
]

Uzman ipucu: Bu bir dizidir. Bu sayede, PWA'nız ile birden fazla web siteniz arasında doğrulanmış bir ilişki tanımlayabilirsiniz.

Not: assetlinks.json dosyanızı oluştururken dosya adını iki kez kontrol edin. Dosya adına fazladan bir "s" eklediğimi fark etmeden önce saatlerimi hata ayıklama işlemiyle boşa harcadım.

Web sitenize PWA'nız hakkında bilgi verin

Ardından, sayfanıza web uygulaması manifesti ekleyerek web sitenize PWA uygulamanız hakkında bilgi verin. Manifest, related_applications özelliğini içermelidir. Bu özellik, platform ve url dahil olmak üzere PWA'nızla ilgili ayrıntıları sağlayan bir dizidir.

• 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"
    }
  ]
  ...
}

Uzman ipucu: Bu bir dizidir. Bu, web siteniz ile birden fazla PWA'nız arasında doğrulanmış bir ilişki tanımlayabileceğiniz anlamına gelir.

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() eşzamansız işlevini çağırın.

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

Başka sorularınız mı var? Başka kullanıcıların benzer soruları olup olmadığını görmek için StackOverflow'daki getInstalledRelatedApps etiketini kontrol edin. Aksi takdirde sorunuzu orada sorun ve progressive-web-apps etiketiyle etiketleyin. 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 ile ilgili 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.