Ten błąd zawiera plik manifestu internetowego z wymaganymi polami, aby umożliwić instalację aplikacji internetowej.
Zawiera też przycisk instalowania, który jest domyślnie ukryty.
Nasłuchiwanie zdarzenia beforeInstallPrompt
Gdy przeglądarka wywoła zdarzenie beforeinstallprompt
, oznacza to, że aplikacja internetowa może zostać zainstalowana, a użytkownikowi może zostać wyświetlony przycisk instalacji. Zdarzenie beforeinstallprompt
jest wywoływane, gdy aplikacja spełnia kryteria możliwości zainstalowania.
Przechwytywanie tego zdarzenia umożliwia deweloperom dostosowanie instalacji i poproszenie użytkownika o jej przeprowadzenie w najlepszym momencie.
- Kliknij Remixuj do edycji, aby umożliwić edycję projektu.
- Dodaj do obiektu
window
obiektbeforeinstallprompt
. - Zapisz zmienną
event
jako zmienną globalną; będziemy jej potrzebować później, aby wyświetlić prompt. - Odsłonij przycisk instalacji.
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);
});
Obsługa kliknięcia przycisku instalacji
Aby wyświetlić prośbę o instalację, wywołaj metodę prompt()
w zapisanym zdarzeniu beforeinstallprompt
. Wywołanie funkcji prompt()
odbywa się w obiekcie przetwarzającym kliknięcie przycisku instalacji, ponieważ funkcja prompt()
musi być wywoływana gestem użytkownika.
- Dodaj moduł obsługi zdarzeń kliknięcia dla przycisku instalacji.
- Zawołanie
prompt()
w zapisanym zdarzeniubeforeinstallprompt
. - Zaloguj wyniki promptu.
- Ustaw zapisane zdarzenie
beforeinstallprompt
na wartość null. - Ukryj przycisk instalacji.
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);
});
Śledzenie zdarzenia instalacji
Instalowanie aplikacji internetowej za pomocą przycisku instalowania to tylko jeden ze sposobów. Mogą też korzystać z menu Chrome, minipaska informacji oraz ikony w omniboksie. Możesz śledzić wszystkie te sposoby instalacji, nasłuchując zdarzenia appinstalled
.
- Dodaj do obiektu
window
obiektappinstalled
. - Zdarzenie instalacji należy odnotować w Analytics lub za pomocą innego mechanizmu.
Kod:
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
Więcej informacji
Gratulacje, Twoja aplikacja jest już dostępna do zainstalowania.
Oto kilka dodatkowych czynności, które możesz wykonać: