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.
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.
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.
İlgili uygulamalar
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).
İ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 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 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.