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), kullanıcıların PWA'nızı mobil veya masaüstü cihazlarına yüklemelerine olanak tanır. Yüklenen PWA'lar, kullanıcının başlatıcısına eklenir. Böylece, diğer yüklü uygulamalar gibi çalıştırılabilir.
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.
Kurulumu tanıtıp tanıtmayacağınızı değerlendirirken kullanıcıların PWA'nızı genellikle nasıl kullandığını göz önünde bulundurun. Ö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 açık standalone
, minimal-ui
veya window-control-overlay
modlarında gösteriliyor.
Ön koşullar
Başlamadan önce, PWA'nızın yüklenebilir olma şartlarını karşıladığından emin olun. Bu şartlar genellikle web uygulaması manifest dosyasına sahip olmayı içerir.
Yüklemeyi teşvik etme
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üklenebileceği 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 dinleme
Progresif Web Uygulamanız gerekli yükleme ölçütlerini karşılıyorsa tarayıcı bir beforeinstallprompt
etkinliği tetikler. Etkinliğe 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ının uygulamanızı yüklemek üzere 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 dokunulduğunda, kayıtlı beforeinstallprompt
etkinliğinde (deferredPrompt
değişkeninde depolanır) prompt()
işlevini çağırın. Kullanıcıya, PWA'nızı yüklemek istediklerini onaylamalarını isteyen bir modal 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
mülkü, kullanıcının seçimiyle çözülen bir sözdür.
Ertelenen etkinlikte prompt()
işlevini yalnızca bir kez çağırabilirsiniz. Kullanıcı bunu kapatırsa beforeinstallprompt
etkinliğinin tekrar tetiklenmesini (genellikle userChoice
mülkü çözüldükten hemen sonra) beklemeniz gerekir.
PWA'nın ne zaman başarıyla yüklendiğini 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, PWA'nız yüklendiğinde (yükleme için kullanılan mekanizmadan bağımsız olarak) tetiklenen appinstalled
etkinliğini dinlemeniz 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 bir tarayıcı sekmesinde veya yüklü bir PWA olarak nasıl başlatıldığını gösterir. Bu sayede, uygulamanın nasıl başlatıldığına bağlı olarak farklı stiller uygulayabilirsiniz. Ö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 izleme
Kullanıcıların PWA'nızı nasıl başlattığını izlemek için matchMedia()
medya sorgusunu test etmek üzere display-mode
kullanın.
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 || navigator.standalone)
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';
}
Görüntü modu değiştiğinde takip et
Kullanıcının browser
modu ile diğer görüntü modları arasında geçiş yapıp yapmadığını izlemek için
display-mode
medya sorgusunda yapılan değişiklikleri dinleme.
// 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());
});
Kullanıcı arayüzünü mevcut ekran moduna göre güncelleme
Yüklü bir PWA olarak başlatıldığında PWA için farklı bir arka plan rengi uygulamak istiyorsanız 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.