Birçok tarayıcı, yükleme işlemini etkinleştirmenize ve tanıtmanıza progresif web uygulamanızın (PWA) doğrudan kullanıcı arayüzünden görüntülenebilir. Yükleme (eski adıyla Ana Ekrana Ekle) ise kullanıcıların mobil veya masaüstü cihazlarında kullanabilirsiniz. PWA yüklendiğinde, kullanıcının başlatıcıya sahip olmalıdır. Böylece yüklü diğer uygulamalar gibi çalışabilir.
Tarayıcı tarafından sağlanan yükleme deneyimine ek olarak, kendi özel yükleme akışınızı doğrudan uygulamanızın içinde sağlayabilirsiniz.
![Spotify PWA'da sağlanan Uygulamayı Yükle düğmesi](https://web.dev/static/articles/customize-install/image/install-app-button-provid-c69a76f7a7ce5.png?hl=tr)
Kurulumu teşvik edip etmeyeceğinize karar verirken, kullanıcıların uygulamanızı genellikle nasıl
PWA'nızı kullanın. Örneğin, PWA'nızı kullanan bir grup kullanıcı varsa
bu kullanıcılar, web sitenizi ziyaret etmek için
Uygulamanızı telefonun ana ekranından veya masaüstündeki Başlat menüsünden başlatmak
işletim sistemi. Bazı verimlilik ve eğlence uygulamaları da
kaldırılarak oluşturulan fazladan ekran alanından tarayıcı araç çubuklarının
penceresi yüklü standalone
veya minimal-ui
modlarında.
Ön koşullar
Başlamadan önce PWA'nızın yüklenebilirlik gereksinimleri, web uygulaması manifest'i de dahildir.
Yükleme işlemini tanıtın
Progresif Web Uygulamanızın yüklenebilir olduğunu göstermek ve uygulamanızın Uygulama içi yükleme akışı:
beforeinstallprompt
etkinliğini dinleyin.- Yükleme akışını tetikleyebilmesi için
beforeinstallprompt
etkinliğini kaydedin daha sonra. - Kullanıcıyı PWA'nızın yüklenebilir olduğu konusunda uyarın ve bir düğme ya da başka bir şey sağlayın öğesi kullanabilirsiniz.
beforeinstallprompt
etkinliğini dinleyin
Progresif Web Uygulamanız gerekli yükleme ölçütlerini karşılıyorsa
tarayıcı bir beforeinstallprompt
etkinliği tetikler. Etkinliğe referans vermek
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 bir düğme veya başka bir arayüz öğesi sağlayın
Kullanıcıların uygulamanızı yüklemek için tıklayabileceği veya dokunabileceği öğeler. Öğe tıklandığında veya
dokunulduysa, kayıtlı beforeinstallprompt
etkinliğindeki (prompt()
deferredPrompt
değişkeni). Kullanıcıya kalıcı yükleme iletişim kutusu gösterilir.
PWA'nızı yüklemek istediklerini onaylamalarını isteyin.
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çimine bağlı olarak çözülür.
prompt()
numaralı telefonu, ertelenen etkinlikte yalnızca bir kez arayabilirsiniz. Kullanıcı
bu etkinlik kapatılırsa beforeinstallprompt
etkinliğine kadar beklemeniz gerekir
genellikle userChoice
özelliğinden hemen sonra tekrar etkinleşir
çözmüştür.
PWA'nın başarıyla yüklendiği zamanı algılama
Kullanıcının uygulamanızı yükleyip yüklemediğini belirlemek için userChoice
özelliğini kullanabilirsiniz.
uygulamanıza kullanıcı arayüzünden erişebilirsiniz. Ancak kullanıcı PWA'nızı yüklerse
userChoice
yardımcı olmaz.
Bunun yerine, her etkinleştiğinde tetiklenen appinstalled
etkinliğini dinlemeniz gerekir
yüklemek için kullanılan mekanizmadan bağımsız olarak PWA'nızın yüklü olması gerekir.
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 nasıl kullanıma sunulduğunu tespit etme
CSS display-mode
medya sorgusu, PWA'nın
yüklü bir PWA olarak kullanabilirsiniz. Bu sayede, farklı süreçlerde
stillerini uygulamaya geçirmenize yardımcı olur. Örneğin, Google Etiket Yöneticisi'ni kullanarak
yükle düğmesini her zaman gizlemek ve
PWA'yı yükleyebilirsiniz.
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()
öğesini kullanarak
display-mode
medya sorgusu. iOS'te Safari henüz desteklemediğinden
bunun yerine, kontrol edin: navigator.standalone
; bu işlem,
tarayıcı bağımsız modda çalışıyor.
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 takip et
Kullanıcının standalone
ile browser tab
arasında değişip değişmediğini izlemek için şunları dinleyin:
display-mode
medya sorgusunda yapılan değişikliklerdir.
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);
});
Kullanıcı arayüzünü mevcut görüntü moduna göre güncelleyin
Yüklü olarak başlatıldığında PWA için farklı bir arka plan rengi uygulamak PWA (progresif web uygulaması) 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? Chrome'un, web uygulaması manifest dosyasındaki güncellemeleri nasıl ele aldığı başlıklı makaleyi inceleyin. görebilirsiniz.