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 algılayabilirsiniz:

• Yükleme davetiyesi iletişim kutusu durumu ve sonucu.
• Yükleme tamamlandı.
• Gezinme, tarayıcıdan PWA penceresine ve tam tersi şekilde aktarılır.
• PWA yükleme durumu.
• İlgili uygulama bir uygulama mağazasından yüklenmiştir.

Bu verileri analiz amacıyla, kullanıcılarınızın tercihlerini anlamak ve kullanıcı deneyimini özelleştirmek için kullanabilirsiniz. Bu etkinlikleri kaydetmek için medya sorguları ve window etkinlikleri gibi araçları veya burada listelenen özellikler API'lerini 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ı manifestinizdeki 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 sorgusu dizesindeki birden çok sorguyu eşleştirebilirsiniz.

Ayrıca, manifest dosyanıza start_url içine, PWA'nızın ne zaman, nasıl ve ne kadar kullanıldığıyla ilgili istatistikleri takip etmek amacıyla 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 tanıtımlarını kaldırmak bu etkinlik işleyici için çok iyi bir kullanımdır.

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

WebAPK'sının yüklü olduğu Android cihazlarda etkinliğin, WebAPK'sı basıldıktan ve yüklendikten sonra değil, kullanıcı iletişim kutusunu kabul ettiğinde tetiklendiğini unutmayın. Uygulama tamamen yüklenmeden önce birkaç saniyelik bir gecikme yaşanabilir.

Yükleme İstemi bölümünde, yükleme isteminin kullanılabilir olup olmadığının nasıl algılanacağı ve kullanıcının hangi seçim yapılacağı açıklanmaktadır.

Oturum aktarımı

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

Android'de, gezinmeyi uygulamaya aktaran tarayıcıdakine benzer bir menü öğesi bulunur. Bu durumda, geçerli URL açılır ancak uygulamada yeni bir gezinme sayfası olur.

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

Kurulumdan sonra aktar

Masaüstü tarayıcılardan gelen mevcut 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çılır. Bu sırada kullanıcının yaptığı işleme devam eder.

Mobil tarayıcılarda, uygulamayı yüklediğinizde mevcut gezinmeniz tarayıcıda kalır. Kullanıcılar uygulamaya geçmek istiyorsa uygulamayı manuel olarak açmaları gerekir. Bu durumda yeni bir gezinme seçeneğine sahip olurlar.

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ü simge arasında gezinme veya URL aktarımı yapılmaz. Aynı PWA (progresif web uygulaması) olsa bile kullanıcının yüklediği her PWA simgesi, Safari'nin sekmesinden ve diğer simgelerden izole edilmiş kendi depolama alanına sahip olur. Kullanıcı yüklü simgesini açtığında Safari ile depolama alanı paylaşılmaz. PWA'nız giriş yapmak istiyorsa 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.

İlgili uygulamalar

Web sitesi, manifest dosyası aracılığıyla bir uygulamayla ilişkiyi belirtir. Bunu yapmak için Web Uygulaması Manifest spesifikasyonunun related_applications üyesini kullanın. related_applications anahtarı, her bir ilgili 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).

Alakalı bir uygulama tercih et

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

İlgili uygulama PWA'nız olabilir. Uygulama bir uygulama mağazasından yüklenir. Bu yapılandırmanın bir avantajı, şu anda yalnızca uygulama mağazasından yüklenen uygulamaların yedeklemeyle veya yeni bir cihaza geçiş yaptığınızda 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 desteklemiyor ancak App Store'daki uygulamalar için Akıllı Uygulama Banner'ları sunuyor. Dolayısıyla, bir PWA'yı veya App Store'da yayınladığınız başka bir uygulamayı tanıtmak istiyorsanız kullanıcıyı uygulamayı yüklemeye davet etmek için PWA'nızın HTML'sine meta etiketler ekleyebilir (az önce sağlanan bağlantıya bakın) ya da uygulama zaten yüklüyse gezinmeyi aktarabilirsiniz.

İlgili yüklü uygulamaları algılama

getInstalledRelatedApps() yöntemi, web sitenizin, kullanıcının cihazında iOS/Android/masaüstü uygulamanızın veya PWA'nın yüklü olup olmadığını kontrol etmesini sağlar.

İlgili bir uygulamanın zaten yüklü olup olmadığını kontrol etmek, genel amaçlı bir web sitesine gitmek yerine özel yüklenmiş istemleri gizleme veya kullanıcıyı doğrudan yüklü uygulamaya yönlendirme gibi özellikleri uygulamanıza yardımcı olur. getInstalledRelatedApps() yöntemini kullanmak için hem yüklü uygulamanın hem de web sitesinin birbiriyle olan bağlantısını yapılandırması gerekir. Platformuna bağlı olarak her uygulama, web sitesini tanımak için meta veriler içerir. Web sitesi, beklenen yüklü uygulamayı manifest'teki related_applications alanında 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() ürününü hemen kullanabilmesi için gerekli meta verileri zaten ekler. Bir PWA'nın getInstalledRelatedApps() kullanılarak önceden yüklenip yüklenmediğini tespit etmek için manifest related_applications alanında webapp öğesini manifest URL'nizle 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üklenmemiştir.

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

PWA'nın kapsamı dışından yüklemeyi tespit etme

Android 89'daki Chrome'dan, PWA'nın kapsamı dışında olsa bile PWA'nın yüklenip yüklenmediğini tespit edebilirsiniz. PWA'nız bu makalede açıklandığı gibi diğer kapsama izin veren /.well-known/ klasöründe bir JSON dosyası ayarlamalıdır.

Kaynaklar

• Uygulamanız yüklü mü? getUploadRelatedApps() bunu size bildirir.
• MDN: İlgili Uygulamalar
• MDN: Appinstalled etkinliği
• Apple: Akıllı Uygulama Banner'larıyla Uygulamaları Tanıtma