Birçok tarayıcı, Progresif Web Uygulamanızın (PWA) yüklenmesini doğrudan kullanıcı arayüzünden etkinleştirmenize ve tanıtmanıza olanak tanır. Yükleme (eski adıyla Ana Ekrana Ekle) kullanıcıların PWA'nızı mobil veya masaüstü cihazlarına yüklemesine olanak tanır. PWA yüklendiğinde kullanıcının başlatıcısına eklenir ve diğer yüklü uygulamalar gibi çalışabilir.
Tarayıcı tarafından sağlanan yükleme deneyiminin yanı sıra, doğrudan uygulamanızdan kendi özel yükleme akışınızı da sağlayabilirsiniz.
![Spotify PWA'da sunulan Uygulamayı Yükle düğmesi](https://web.dev/static/articles/customize-install/image/install-app-button-provid-c69a76f7a7ce5.png?authuser=6&hl=tr)
Yüklemeyi teşvik edip etmemeyi düşünürken kullanıcıların PWA'nızı genellikle nasıl kullandığını göz önünde bulundurun. Ö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 rahatlığından yararlanabilir. Bazı üretkenlik 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 göstermek ve özel bir uygulama içi yükleme akışı sağlamak için:
beforeinstallprompt
etkinliğini dinleyin.- Yükleme akışını daha sonra tetikleyebilmesi 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 için tıklayabileceği veya dokunabileceği bir düğme ya da başka bir arayüz öğesi sağlayın. Öğe tıklandığında veya öğeye dokunulduğunda, kaydedilen 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 onaylamasını isteyen 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ı etkinliği kapatırsa beforeinstallprompt
etkinliğinin tekrar etkinleşmesini beklemeniz gerekir (genellikle userChoice
özelliği çözümlendikten hemen sonra).
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, PWA'nız her yüklendiğinde tetiklenen appinstalled
etkinliğini dinlemeniz gerekir. Yüklemek için hangi mekanizma kullanılırsa kullanılsın.
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 bir tarayıcı sekmesinde veya yüklü bir PWA olarak nasıl başlatıldığını gösterir. Bu, uygulamanın lansman şekline bağlı
olarak farklı stiller uygulanmasını mümkün kılar. Örneğin, uygulamayı, PWA yüklü bir PWA olarak başlatıldığında, yükle düğmesini her zaman gizleyecek ve geri düğmesi sağlayacak şekilde yapılandırabilirsiniz.
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, bunun yerine tarayıcının bağımsız modda çalışıp çalışmadığını belirten bir boole değeri döndüren navigator.standalone
öğesini işaretlemeniz gerekir.
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.