Algılama

Kullanıcının PWA'nızı tarayıcıda mı yoksa bağımsız modda mı kullandığını algılayabilirsiniz. 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ı.
• Tarayıcıdan PWA penceresine ve tam tersi şekilde gezinme aktarımı.
• PWA yükleme durumu.
• Bir uygulama mağazasından yüklenen ilgili uygulama.

Bu verileri analizler için, kullanıcınızın tercihlerini anlamak ve deneyimini özelleştirmek amacıyla 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. Virgülle ayrılmış koşulları kullanarak medya sorgu dizesinde birden fazla sorguyu da eşleştirebilirsiniz.

Ayrıca manifest'inizin start_url bölümüne, PWA'nızın ne zaman, ne şekilde ve ne kadar kullanıldığıyla ilgili istatistikleri izlemek için Analytics ile yakalayabileceğiniz bir sorgu parametresi ekleyebilirsiniz.

Uygulama yükleme

Kullanıcı tarayıcıdaki yükleme istemini kabul ettiğinde Chromium tabanlı tarayıcılarda appinstalled etkinliği tetiklenir. Bu etkinlik işleyicinin en iyi kullanım alanlarından biri, eklediğiniz tüm uygulama içi yükleme promosyonlarını kaldırmaktır.

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

WebAPK'nin bulunduğu Android cihazlarda etkinliğin, WebAPK oluşturulup yüklendikten sonra değil, kullanıcı iletişim kutusunu kabul ettiğinde tetiklendiğini unutmayın. Uygulamanın tamamen yüklenmesi birkaç saniye sürebilir.

Yükleme İstemleri bölümü, yükleme isteğinin kullanılabilir olup olmadığını ve kullanıcının hangi seçimi yaptığını nasıl algılayacağınızı açıklar.

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ılarında, aşağıdaki resimde gösterildiği gibi rozetleri veya menü öğelerini kullanarak mevcut gezinmeyi bu bağlamlar arasında aktarabilirsiniz.

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.

Yüklemeden sonra aktarma

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. Böylece kullanıcı, yaptığı işleme devam edebilir.

Mobil tarayıcılarda, uygulamayı yüklediğinizde mevcut gezinme menünüz tarayıcıda kalır. Kullanıcıların uygulamaya geçmek için uygulamayı manuel olarak açmaları gerekir. Bu durumda yeni bir gezinme menüsü gösterilir.

Aktarım algılama

Tarayıcı ile pencere arasında aktarımı algılamak için 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ı yalıtımı

iOS ve iPadOS'te tarayıcı ile yüklü simge arasında gezinme veya URL aktarımı yapılamaz. 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ın oturum açması gerekiyorsa kullanıcının tekrar oturum açması 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 aracılığıyla bir uygulamayla ilişkiyi belirtir. Bunu yapmak için Web Uygulama Manifesti 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ı 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).

İlgili bir uygulamayı tercih etme

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 desteklemez ancak App Store'daki uygulamalar için Akıllı Uygulama Banner'ları sunar. Bu nedenle, App Store'da yayınladığınız bir PWA'yı veya 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 ekleyebilirsiniz (Az önce verilen bağlantıya bakın) veya uygulama zaten yüklüyse gezinme menüsünü aktarabilirsiniz.

Yüklü olan ilgili uygulamaları algılama

getInstalledRelatedApps() yöntemi, web sitenizin iOS/Android/masaüstü uygulamanızın veya PWA'nızın kullanıcının cihazına yüklü olup olmadığını 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 birbirleriyle olan bağlantıları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 algılama

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

• Uygulamanız yüklü mü? getInstalledRelatedApps() bunu size söyleyebilir.
• MDN: İlgili Uygulamalar
• MDN: AppInstalled etkinliği
• Apple: Akıllı Uygulama Banner'larıyla Uygulama Tanıtımı