Ten błąd zawiera manifest internetowy z polami wymaganymi do instalacji aplikacji internetowej.
Ma też przycisk instalacji, który jest domyślnie ukryty.
Wykrywaj zdarzenie beforeinstallprompt
Gdy przeglądarka uruchamia zdarzenie beforeinstallprompt
, oznacza to, że aplikację internetową można zainstalować i użytkownik może wyświetlić przycisk instalacji. Zdarzenie beforeinstallprompt
jest uruchamiane, gdy aplikacja spełnia kryteria możliwości zainstalowania.
Rejestrowanie zdarzenia pozwala deweloperom dostosować instalację i zachęcić użytkownika do instalacji, gdy uzna, że to właściwy moment.
- Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.
- Dodaj moduł obsługi zdarzeń
beforeinstallprompt
do obiektuwindow
. - Zapisz
event
jako zmienną globalną. Będzie nam potrzebna później do wyświetlenia promptu. - Odkryj 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 funkcję prompt()
w zapisanym zdarzeniu beforeinstallprompt
. Wywoływanie prompt()
jest wykonywane w module obsługi kliknięć przycisku instalacji, ponieważ właściwość prompt()
musi być wywoływana gestem użytkownika.
- Dodaj moduł obsługi zdarzeń kliknięcia dla przycisku instalacji.
- Zadzwoń pod numer
prompt()
powiązany z zapisanym wydarzeniembeforeinstallprompt
. - Zapisz wyniki promptu.
- Ustaw wartość zapisanego zdarzenia
beforeinstallprompt
na 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 instalacji
Użytkownicy mogą zainstalować aplikację internetową tylko za pomocą przycisku instalacji. Mogą też korzystać z menu Chrome, minipaska informacyjnego oraz ikony w omniboksie. Wszystkie te sposoby instalacji możesz śledzić, nasłuchując zdarzenia appinstalled
.
- Dodaj moduł obsługi zdarzeń
appinstalled
do obiektuwindow
. - Zarejestruj zdarzenie instalacji w narzędziu Analytics lub innym mechanizmie.
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, aplikację można teraz zainstalować.
Oto kilka dodatkowych czynności, które możesz wykonać: