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 daveti 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.
  • Bir uygulama mağazasından yüklenen ilgili uygulama.

Bu verileri analiz amacıyla, kullanıcılarınızın tercihlerini anlamak ve kullanıcı deneyimini özelleştirmek için kullanabilirsiniz. Bu etkinlikleri yakalamak için medya sorguları, window'deki etkinlikler gibi araçları veya burada listelenen özellik API'lerini kullanabilirsiniz.

Görüntüleme modunu algılama

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

function getPWADisplayMode() {
  if (document.referrer.startsWith('android-app://'))
    return 'twa';
  if (window.matchMedia('(display-mode: browser)').matches)
    return 'browser';
  if (window.matchMedia('(display-mode: standalone)').matches)
    return 'standalone';
  if (window.matchMedia('(display-mode: minimal-ui)').matches)
    return 'minimal-ui';
  if (window.matchMedia('(display-mode: fullscreen)').matches)
    return 'fullscreen';
  if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
    return 'window-controls-overlay';

  return 'unknown';
}

window.addEventListener('DOMContentLoaded', () => {
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', getPWADisplayMode());
});

Bu örneği kullanırsanız web uygulaması manifestinizdeki görüntü modunu (ör. 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'inizin start_url bölümüne bir sorgu parametresi ekleyebilirsiniz. Bu parametreyi, PWA'nızın ne zaman, ne şekilde ve ne kadar kullanıldığıyla ilgili istatistikleri izlemek için Analytics ile yakalayabilirsiniz.

Uygulama yükleme

Bir kullanıcı tarayıcıdaki 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 olabilir.

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üklü 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 mevcut gezinmeyi aktarabilirsiniz.

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

Android'de, tarayıcıda masaüstündekine benzer bir menü öğesi bulunur. Bu öğe, gezinmeyi uygulamaya aktarır. Bu durumda, mevcut URL açılır ancak uygulamada yeni bir sayfa gezinmesi olur.

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

Android'deki Chrome, PWA penceresinde yeni gezinme menüsünü açan menü öğesini gösteriyor.

Kurulumdan sonra aktar

Masaüstü tarayıcılarındaki 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 isterse uygulamayı manuel olarak açmaları gerekir. Bu durumda yeni bir gezinme bölümüne yönlendirilirsiniz.

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 the display mode used in your manifest
  window.matchMedia('(display-mode: standalone)')
    .addEventListener('change', () => {
      // Log display mode change to analytics
      console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
    });
});

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 olsa bile kullanıcının yüklediği her PWA simgesinin Safari'nin sekmesinden ve diğer simgelerden izole edilmiş kendi depolama alanı olur. Kullanıcılar yüklü simgeyi 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.

Tarayıcı Desteği

  • Chrome: Desteklenmez.
  • Edge: Desteklenmez.
  • Firefox: Desteklenmez.
  • Safari: Desteklenmez.

Kaynak

Web sitesi, manifest 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ı 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 dosyanızda prefer_related_applications alanını true olarak ayarlayarak kullanıcıyı ilgili bir uygulamaya yönlendirebilirsiniz. Bu kurulumla, uyumlu tarayıcılarda yükleme akışları PWA'yı yüklemez. Bunun yerine, related_applications girişinde belirttiğiniz url veya id adresinden mağaza yüklemesi tetikler.

İlgili uygulama, PWA'nız olabilir ve bir uygulama mağazasından yüklenir. Bu yapılandırmanın avantajlarından biri, şu anda yalnızca uygulama mağazasından yüklenen uygulamaların yedeklemeyle veya yeni bir cihaza geçtiğinizde kurtarılabilmesidir.

{
  ...
  "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.

getInstalledRelatedApps() yöntemi, web sitenizin iOS/Android/masaüstü uygulamanızın veya PWA'nızın kullanıcının cihazına yüklenip yüklenmediğini kontrol etmesine olanak tanır.

İlgili bir uygulamanın yüklü olup olmadığını kontrol etmek, özel olarak yüklenen istemleri gizleme veya kullanıcıyı genel amaçlı bir web sitesine yönlendirmek yerine 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. Her uygulama, platformuna bağlı olarak web sitesini tanıyacak meta veriler içerir ve 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()'i hemen kullanabilmesi için gerekli meta verileri zaten ekler. Bir PWA'nın getInstalledRelatedApps() kullanılarak yüklenip yüklenmediğini algılamak için manifest related_applications alanında webapp'yi manifest'inizin URL'siyle tanımlayın:

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

getInstalledRelatedApps(), bir uygulama nesnesi 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ışından yüklemeyi tespit etme

Android 89'daki Chrome'da, PWA'nın kapsamı dışından bile bir PWA'nın yüklü olup olmadığını algılayabilirsiniz. PWA'nız, /.well-known/ klasöründe bu makalede açıklandığı gibi diğer kapsama izin veren bir JSON dosyası ayarlamalıdır.

Kaynaklar