Birçok tarayıcı, Progresif Web Uygulamanızın (PWA) yüklenmesini doğrudan PWA'nızın kullanıcı arayüzünden etkinleştirmenizi ve tanıtmanızı sağlar. Yükleme (eski adıyla Ana Ekrana Ekle) kullanıcıların PWA'nızı mobil veya masaüstü cihazlarına yüklemesini kolaylaştırır. PWA yüklendiğinde kullanıcının başlatıcısına eklenir ve diğer yüklü uygulamalar gibi çalıştırılması sağlanır.
Tarayıcının sağladığı yükleme deneyiminin yanı sıra, doğrudan uygulamanızın içinden kendi özel yükleme akışınızı sağlamak da mümkündür.
Yüklemeleri teşvik edip etmemeyi düşünürken kullanıcıların PWA'nızı genellikle nasıl kullandıklarını düşünmeniz en iyisidir. Örneğin, PWA'nızı haftada birden çok kez kullanan bir kullanıcı grubu varsa bu kullanıcılar, uygulamanızı bir telefon ana ekranından veya bir masaüstü işletim sistemindeki Başlat menüsünden başlatma kolaylığından yararlanabilir. Bazı verimlilik ve eğlence uygulamaları, yüklü standalone
veya minimal-ui
modlarında tarayıcı araç çubuklarının pencereden kaldırılmasıyla oluşturulan ekstra ekran alanından da yararlanır.
Ön koşullar
Başlamadan önce, PWA'nızın genellikle bir web uygulaması manifestine sahip olmayı da içeren yüklenebilirlik gereksinimlerini karşıladığından emin olun.
Yüklemeyi teşvik et
Progresif Web Uygulamanızın yüklenebilir olduğunu belirtmek ve özel bir uygulama içi yükleme akışı sağlamak için:
beforeinstallprompt
etkinliğini dinleyin.- Yükleme akışını daha sonra tetiklemek üzere kullanılabilmesi için
beforeinstallprompt
etkinliğini kaydedin. - Kullanıcıyı PWA'nızın yüklenebilir olduğu konusunda uyarın ve uygulama içi yükleme akışını başlatmak için bir düğme veya başka bir öğe sağlayın.
beforeinstallprompt
etkinliğini dinle
Progresif Web Uygulamanız gerekli yükleme ölçütlerini karşılıyorsa, tarayıcı bir beforeinstallprompt
etkinliği tetikler. Etkinliğe bir referans kaydedin ve kullanıcı arayüzünüzü, kullanıcının PWA'nızı yükleyebileceğini belirtecek şekilde güncelleyin.
// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can install the PWA
showInstallPromotion();
// Optionally, send analytics event that PWA install promo was shown.
console.log(`'beforeinstallprompt' event was fired.`);
});
Uygulama içi yükleme akışı
Uygulama içi yükleme sağlamak için kullanıcıların uygulamanızı yüklemek üzere tıklayabileceği bir düğme veya başka bir arayüz öğesi sağlayın. Öğe tıklandığında, kayıtlı beforeinstallprompt
etkinliğinde (deferredPrompt
değişkeninde saklanır) prompt()
çağrısı yapın. Kullanıcıya, PWA'nızı yüklemek istediğini belirten
kalıcı bir yükleme iletişim kutusu gösterilir.
buttonInstall.addEventListener('click', async () => {
// Hide the app provided install promotion
hideInstallPromotion();
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
// Optionally, send analytics event with outcome of user choice
console.log(`User response to the install prompt: ${outcome}`);
// We've used the prompt, and can't use it again, throw it away
deferredPrompt = null;
});
userChoice
özelliği, kullanıcının seçimiyle çözümlenen bir vaattir.
Ertelenen etkinlikte yalnızca bir kez prompt()
çağırabilirsiniz. Kullanıcı bunu kapatırsa beforeinstallprompt
etkinliği tekrar tetiklenene kadar (genellikle userChoice
özelliği çözümlendikten hemen sonra) beklemeniz gerekir.
PWA'nın başarıyla yüklendiğini algıla
Kullanıcının uygulamanızı kullanıcı arayüzünden yükleyip yüklemediğini belirlemek için userChoice
özelliğini kullanabilirsiniz. Ancak, kullanıcı PWA'nızı adres çubuğundan veya başka bir tarayıcı bileşeninden yüklerse userChoice
işe yaramaz. Bunun yerine, appinstalled
etkinliğini dinlemeniz gerekir. PWA'nızı yüklemek için hangi mekanizma kullanılırsa kullanılsın, PWA'nız her yüklendiğinde tetiklenir.
window.addEventListener('appinstalled', () => {
// Hide the app-provided install promotion
hideInstallPromotion();
// Clear the deferredPrompt so it can be garbage collected
deferredPrompt = null;
// Optionally, send analytics event to indicate successful install
console.log('PWA was installed');
});
PWA'nın kullanıma sunulma şeklini tespit etme
CSS display-mode
medya sorgusu, PWA'nın nasıl başlatıldığını (tarayıcı sekmesinde veya yüklü PWA olarak) belirtir. Bu, uygulamanın lansman şekline bağlı olarak farklı stiller uygulanmasını mümkün kılar. Örneğin, yüklü bir PWA olarak başlatıldığında, yükle düğmesini her zaman gizleyin ve bir geri düğmesi ekleyin.
PWA'nın nasıl kullanıma sunulduğunu takip etme
Kullanıcıların PWA'nızı nasıl başlattığını izlemek için matchMedia()
kullanarak display-mode
medya sorgusunu test edin. iOS'te Safari henüz bunu desteklememektedir. Bu nedenle, navigator.standalone
işaretini işaretlemeniz gerekir. Bu değer, tarayıcının bağımsız modda çalışıp çalışmadığını belirten bir boole değeri döndürür.
function getPWADisplayMode() {
const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
if (document.referrer.startsWith('android-app://')) {
return 'twa';
} else if (navigator.standalone || isStandalone) {
return 'standalone';
}
return 'browser';
}
Görüntü modu değiştiğinde izleme
Kullanıcının standalone
ve browser tab
arasında değişiklik yapıp yapmadığını izlemek için display-mode
medya sorgusunda yapılan değişiklikleri dinleyin.
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);
});
Mevcut görüntü moduna göre kullanıcı arayüzünü güncelle
Yüklü PWA olarak başlatıldığında PWA'ya farklı bir arka plan rengi uygulamak için koşullu CSS kullanın:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
Uygulamanızın simgesini ve adını güncelleme
Uygulamanızın adını güncellemeniz veya yeni simgeler sağlamanız gerekirse ne olur? Bu değişikliklerin Chrome'a ne zaman ve nasıl yansıtıldığını görmek için Chrome'un web uygulaması manifest dosyasındaki güncellemeleri işleme şekli başlıklı makaleye göz atın.