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

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?

Android uygulamasının zaten yüklü olup olmadığını belirlemek için getInstalledRelatedApps() kullanan bir web sitesi.

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.

Desteklendiği yerler:

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ı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, 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.

Desteklendiği yerler:

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ır
  • id, 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.

Desteklendiği yerler:

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.

Desteklendiği yerler:

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.

Faydalı bağlantılar

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.