Algılama

Kullanıcının PWA'nızı tarayıcıda mı yoksa bağımsız modda mı kullandığını tespit edebilirsiniz. Chromium tabanlı tarayıcılarda (Android ve masaüstü) aşağıdaki etkinlikleri de tespit edebilirsiniz:

  • Yükleme davetiyesi iletişim kutusu durumu ve sonucu.
  • Yükleme tamamlandı.
  • Tarayıcıdan PWA penceresine ve bunun tersi şekilde gezinme aktarımı.
  • PWA yükleme durumu.
  • Bir uygulama mağazasından yüklenen ilgili uygulama.

Bu verileri analiz yapmak, kullanıcılarınızın tercihlerini anlamak ve kullanıcı deneyimini özelleştirmek için kullanabilirsiniz. Bu etkinlikleri kaydetmek için medya sorguları, window etkinlikleri veya burada listelenmiş bulabileceğiniz özellikler API'leri gibi araçları kullanabilirsiniz.

Görüntü modu algılanıyor

Kullanıcıların PWA'nızı nasıl başlattığını izlemek için matchMedia() kullanarak display-mode medya sorgusunu test edebilirsiniz.

window.addEventListener('DOMContentLoaded', () => {
  let displayMode = 'browser tab';
  if (window.matchMedia('(display-mode: standalone)').matches) {
    displayMode = 'standalone';
  }
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', displayMode);
});

Bu örneği kullanırsanız web uygulaması manifest dosyanızdaki görüntüleme modunu (örneğin, standalone, minimal-ui veya fullscreen) eşleştirmeyi unutmayın. Ayrıca, virgülle ayrılmış koşulları kullanarak medya sorgu dizesindeki birden çok sorguyu eşleştirebilirsiniz.

Ayrıca PWA'nızın ne zaman, ne şekilde ve ne kadar kullanıldığına dair istatistikleri takip etmek için manifest'inizin start_url öğesine analizlerle yakalayabileceğiniz bir sorgu parametresi ekleyebilirsiniz.

Uygulama yükleme

Kullanıcı, tarayıcıda yükleme istemini kabul ettiğinde Chromium tabanlı tarayıcılarda appinstalled etkinliği tetiklenir. Eklediğiniz uygulama içi yükleme promosyonlarını kaldırmak, bu etkinlik işleyicinin iyi bir kullanım şeklidir.

window.addEventListener('appinstalled', () => {
  // If visible, hide the install promotion
  hideInAppInstallPromotion();
  // Log install to analytics
  console.log('INSTALL: Success');
});

WebAPK yüklü Android cihazlarda etkinliğin kullanıcı iletişim kutusunu kabul ettiğinde tetiklendiğini, WebAPK'sı bastırılıp yüklendikten sonra etkinleşmediğini unutmayın. Uygulamanın tamamen yüklenmesi birkaç saniye gecikebilir.

Yükleme İstemi bölümünde, yükleme isteminin kullanılabilir olup olmadığının nasıl tespit edileceği ve kullanıcının hangi tercihi yaptığı açıklanmaktadır.

Oturum aktarma

Kullanıcılar PWA'nızı tarayıcıda ve yüklenen bağımsız biçimde kullanabilir. Masaüstü tarayıcılarda, aşağıdaki resimde görüldüğü gibi, rozetleri veya menü öğelerini kullanarak bu bağlamlar arasında geçerli gezinmeyi aktarabilirsiniz.

Tarayıcı sekmesi ile PWA penceresi arasında gezinme aktarımı.

Android'de, gezinmeyi uygulamaya aktaran masaüstündekine benzer bir menü öğesi vardır. Bu durumda mevcut URL açılır ancak uygulamada yeni bir sayfa gezinmesi olarak kullanılır.

Aşağıdaki resimde, Android'de uygulama yüklüyken menü öğesini görebilirsiniz.

Android'deki Chrome, PWA penceresinde yeni bir gezinme penceresi açmak için menü öğesini gösterir.

Kurulumdan sonra aktar

Masaüstü tarayıcılarda geçerli gezinme, yükleme sırasında hemen uygulamaya aktarılır. Tarayıcının sekmesi kapatılır ve yeni yüklenen uygulama açılarak kullanıcının işlemine devam edilir.

Mobil tarayıcılarda, uygulamayı yüklediğinizde mevcut gezinme düzeniniz tarayıcıda kalır. Kullanıcılar uygulamaya geçmek isterse uygulamayı manuel olarak açmaları gerekir. Bunun için yeni bir gezinme deneyimi sunulur.

Aktarımı algılama

Tarayıcı ile pencere arasındaki aktarımı algılamak için bir medya sorgusu kullanabilirsiniz:

window.addEventListener('DOMContentLoaded', () => {
  // replace standalone with your display used in manifest
  window.matchMedia('(display-mode: standalone)')
    .addEventListener('change', (evt) => {
      let displayMode = 'browser';
      if (evt.matches) {
        displayMode = 'standalone';
      }
      // Log display mode change to analytics
      console.log('DISPLAY_MODE_CHANGED', displayMode);
    });
});

iOS ve iPadOS depolama alanı izolasyonu

iOS ve iPadOS'te, tarayıcı ile yüklü simgesi arasında gezinme veya URL aktarımı yapılmaz. Aynı PWA olsa bile kullanıcının yüklediği her PWA simgesinin Safari sekmesinden ve diğer simgelerden izole edilmiş kendi depolama alanı olur. Bir kullanıcı yüklü simgesini açtığında Safari ile depolama alanı paylaşılmaz. PWA'nızın giriş yapması gerekiyorsa kullanıcının tekrar giriş yapması gerekir. Uygulama ana ekrana birkaç kez eklendiyse her PWA örneği için kullanıcının farklı bir oturumu olur.

Tarayıcı Desteği

  • x
  • 79
  • x
  • x

Kaynak

Web sitesi, manifest dosyası aracılığıyla bir uygulamayla olan ilişkisini belirtir. Bunu yapmak için Web Uygulaması Manifest spesifikasyonunun related_applications üyesini kullanın. related_applications anahtarı, ilgili her uygulamayı temsil eden bir nesne dizisidir. Her giriş platform, url ve isteğe bağlı bir id içerir.

Olası platform değerleri şunlardır:

  • chrome_web_store: Google Chrome Web Mağazası.
  • play: Google Play uygulamaları (Android ve ChromeOS).
  • chromeos_play: ChromeOS Play.
  • webapp: Web uygulamaları.
  • windows: Microsoft Store (Windows 10 ve 11).
  • f-droid: F-droid.
  • amazon: Amazon AppStore (FireOS).

Kullanıcı bir uygulama yüklediğinde, manifest'inizde prefer_related_applications alanını true olarak ayarlarsanız kullanıcıyı ilgili bir uygulamaya yönlendirebilirsiniz. Bu kurulumda, yükleme akışları uyumlu tarayıcılarda PWA'yı yüklemez. Bunun yerine, related_applications girişinde belirttiğiniz url veya id'dan mağaza yüklemesini tetikler.

İlgili uygulama PWA'nız olabilir ve bir uygulama mağazası üzerinden yüklenir. Bu yapılandırmanın bir avantajı şu anda yalnızca uygulama mağazası üzerinden yüklenen uygulamaların bir yedekle veya yeni bir cihaza geçtiğinizde kurtarılmasıdır.

{
  ...
  "related_applications:" [
     {
       "platform": "play",
       "url": "https://play.google.com/..."
     }
  ],
  "prefer_related_applications": true
}

Apple Akıllı Uygulama Banner'ları

Safari, related_applications üyesini desteklemez ancak App Store'daki uygulamalar için Akıllı Uygulama Banner'ları sunar. Dolayısıyla, bir PWA'yı veya App Store'da yayınladığınız başka bir uygulamayı tanıtmak isterseniz kullanıcıyı uygulamayı yüklemeye davet etmek için PWA'nızın HTML'sine meta etiketler ekleyebilir (sağlanan bağlantıya bakın) veya zaten yüklüyse gezinmeyi aktarabilirsiniz.

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.

İlgili bir uygulamanın halihazırda yüklü olup olmadığını kontrol etmek, genel amaçlı bir web sitesine gitmek yerine özel olarak yüklenen istemleri gizleme veya kullanıcıyı doğrudan yüklü uygulamaya yönlendirme gibi özellikleri uygulamanıza yardımcı olur. getInstalledRelatedApps() yönteminin kullanılabilmesi için hem yüklü uygulamanın hem de web sitesinin birbirleriyle bağlantılarını yapılandırması gerekir. Bulunduğu platforma bağlı olarak her uygulama, web sitesini tanımak için meta veriler ve web sitesi, manifest dosyasındaki related_applications alanında beklenen yüklü uygulamayı içerir.

PWA'nızı uygulama mağazalarında yayınlamanıza olanak tanıyan BubbleWrap veya PWA Builder gibi araçlar, web sitenizin getInstalledRelatedApps()'i hemen kullanabilmesi için gerekli meta verileri zaten ekler. Bir PWA'nın önceden getInstalledRelatedApps() kullanılarak yüklenip yüklenmediğini tespit etmek için manifest related_applications alanında, manifest URL'nizle birlikte webapp tanımlayın:

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

getInstalledRelatedApps(), bir uygulama nesneleri dizisi döndürür. Dizi boşsa ilgili uygulama yüklü değildir.

const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;

PWA'nın kapsamı dışında olan yüklemeyi algılama

Android 89'daki Chrome'dan, PWA'nın kapsamı dışında olsa bile PWA yüklü olup olmadığını tespit edebilirsiniz. PWA'nızın, bu makalede açıklandığı gibi /.well-known/ klasörü içinde bir JSON dosyası ayarlayarak diğer kapsama izin vermesi gerekir.

Kaynaklar