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.
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.
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.
İlgili uygulamalar
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).
İlgili bir uygulamayı tercih ediyorum
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.
İ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ı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.