Bu hata, bir web uygulamasını yüklenebilir hale getirmek için gereken alanları içeren web manifestini içerir.
Ayrıca varsayılan olarak gizli olan bir yükle düğmesi de vardır.
beforeinstallprompt etkinliğini dinleme
Tarayıcı beforeinstallprompt
etkinliğini tetiklediğinde, web uygulamasının yüklenebileceği ve kullanıcıya bir yükleme düğmesinin gösterilebileceği anlaşılır. beforeinstallprompt
etkinliği, uygulama yüklenebilirlik ölçütlerini karşıladığında tetiklenir.
Etkinliği yakalamak, geliştiricilerin yüklemeyi özelleştirmesine ve en uygun zamanı düşündükleri anda kullanıcıyı yüklemeye teşvik etmelerine olanak tanır.
- Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.
window
nesnesine birbeforeinstallprompt
etkinlik işleyicisi ekleyin.event
değerini genel değişken olarak kaydedin. İstem göstermek için daha sonra bu değere ihtiyacımız olacak.- Yükle düğmesini görünür hale getirin.
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üğmesinin tıklanmasını işleme
Yükleme istemini göstermek için kayıtlı beforeinstallprompt
etkinliğinde prompt()
işlevini çağırın. prompt()
, kullanıcı hareketinden çağrılması gerektiğinden yükleme düğmesi tıklama işleyicisinde çağrılır.prompt()
- Yükleme düğmesi için bir tıklama etkinliği işleyici ekleyin.
- Kayıtlı
beforeinstallprompt
etkinliğindeprompt()
'ü arayın. - İstemin sonuçlarını günlüğe kaydedin.
- Kayıtlı
beforeinstallprompt
etkinliğini null 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
Web uygulamalarını yükleme düğmesi aracılığıyla yüklemek, kullanıcıların uygulama yüklemesinin tek yolu değildir. Ayrıca Chrome'un menüsünü, mini bilgi çubuğunu ve çok amaçlı adres çubuğundaki simgeyi de kullanabilirler. appinstalled
etkinliğini dinleyerek bu kurulum yöntemlerinin tümünü izleyebilirsiniz.
window
nesnesine birappinstalled
etkinlik işleyicisi ekleyin.- Yükleme etkinliğini Analytics'e veya başka bir mekanizmaya 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 diğer işlemler: