Bu hata, bir Web Uygulamasını yüklenebilir hale getirmek için gerekli alanların bulunduğu web manifestini içeriyor.
Ayrıca, varsayılan olarak gizlenmiş bir yükleme düğmesi de vardır.
beforeinstallprompt etkinliğini dinleyin
Tarayıcı beforeinstallprompt
etkinliğini tetiklediğinde, web uygulamasının yüklenebileceği ve kullanıcıya bir yükle düğmesinin gösterilebileceği belirtilir. beforeinstallprompt
etkinliği, uygulama yüklenebilirlik ölçütlerini karşıladığında tetiklenir.
Etkinliğin kaydedilmesi, geliştiricilerin yüklemeyi özelleştirmesini ve en uygun zaman olduğunu düşündüğünde kullanıcıdan yükleme yapmasını istemelerini sağlar.
- Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.
window
nesnesine birbeforeinstallprompt
etkinlik işleyicisi ekleyin.event
öğesini genel değişken olarak kaydedin. İstemi göstermek için daha sonra buna ihtiyacımız olacaktır.- Yükle düğmesini gösterme.
Kod:
window.addEventListener('beforeinstallprompt', (event) => {
// Prevent the mini-infobar from appearing on mobile.
event.preventDefault();
console.log('👍', 'beforeinstallprompt', event);
// Stash the event so it can be triggered later.
window.deferredPrompt = event;
// Remove the 'hidden' class from the install button container.
divInstall.classList.toggle('hidden', false);
});
Yükle düğmesi tıklamasını işleme
Yükleme istemini göstermek için kayıtlı beforeinstallprompt
etkinliğinde prompt()
yöntemini çağırın. prompt()
çağrısı, yükleme düğmesi tıklama işleyicisinde yapılır, çünkü prompt()
bir kullanıcı hareketinden çağrılmalıdır.
- Yükle düğmesi için bir tıklama etkinlik işleyicisi ekleyin.
- Kaydedilen
beforeinstallprompt
etkinliğindeprompt()
adlı kişiyi arayın. - İstemin sonuçlarını günlüğe kaydedin.
- Kaydedilen
beforeinstallprompt
etkinliğini boş olarak ayarlayın. - Yükle düğmesini gizleyin.
Kod:
butInstall.addEventListener('click', async () => {
console.log('👍', 'butInstall-clicked');
const promptEvent = window.deferredPrompt;
if (!promptEvent) {
// The deferred prompt isn't available.
return;
}
// Show the install prompt.
promptEvent.prompt();
// Log the result
const result = await promptEvent.userChoice;
console.log('👍', 'userChoice', result);
// Reset the deferred prompt variable, since
// prompt() can only be called once.
window.deferredPrompt = null;
// Hide the install button.
divInstall.classList.toggle('hidden', true);
});
Yükleme etkinliğini izleme
Bir Web Uygulaması'nı yükleme düğmesiyle yüklemek, kullanıcıların söz konusu uygulamayı
yükleyebilmesinin tek yoludur. Ayrıca Chrome'un menüsünü, mini bilgi çubuğunu ve çok amaçlı adres çubuğundaki bir simge üzerinden de kullanabilirler. Bu yükleme yöntemlerinin tümünü appinstalled
etkinliğini dinleyerek izleyebilirsiniz.
window
nesnesine birappinstalled
etkinlik işleyicisi ekleyin.- Yükleme etkinliğini analize veya başka bir sisteme kaydedin.
Kod:
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
Daha fazla bilgi
Tebrikler, uygulamanız artık yüklenebilir!
Yapabileceğiniz ek işlemlerden bazıları şunlardır: