Dieser Fehler enthält das Webmanifest mit den Pflichtfeldern, um eine Web-App installierbar zu machen.
Sie verfügt auch über eine Schaltfläche zum Installieren, die standardmäßig ausgeblendet ist.
Auf das Ereignis „beforeinstallprompt“ warten
Wenn der Browser das beforeinstallprompt
-Ereignis auslöst, weist dies darauf hin, dass die Web-App installiert werden kann und dem Nutzer eine Installationsschaltfläche angezeigt werden kann. Das Ereignis beforeinstallprompt
wird ausgelöst, wenn die App die Kriterien für die Installierbarkeit erfüllt.
Wenn Sie das Ereignis aufzeichnen, können Entwickler die Installation anpassen und den Nutzer zur Installation auffordern, wenn er es für den besten Zeitpunkt hält.
- Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.
- Fügen Sie dem
window
-Objekt einenbeforeinstallprompt
-Event-Handler hinzu. - Speichern Sie die
event
als globale Variable. Sie werden später benötigt, um die Eingabeaufforderung anzuzeigen. - Blende die Installationsschaltfläche ein.
Code:
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);
});
Umgang mit dem Klicken auf die Installationsschaltfläche
Wenn Sie die Installationsaufforderung einblenden möchten, rufen Sie prompt()
für das gespeicherte beforeinstallprompt
-Ereignis auf. prompt()
wird im Klick-Handler für die Installationsschaltfläche aufgerufen, da prompt()
über eine Nutzergeste aufgerufen werden muss.
- Fügen Sie einen Klick-Event-Handler für die Installationsschaltfläche hinzu.
prompt()
für das gespeichertebeforeinstallprompt
-Ereignis aufrufen.- Protokollieren Sie die Ergebnisse des Prompts.
- Legen Sie für das gespeicherte
beforeinstallprompt
-Ereignis den Wert „null“ fest. - Blende die Installationsschaltfläche aus.
Code:
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);
});
Installationsereignis erfassen
Die Installation einer Webanwendung über eine Installationsschaltfläche ist nur eine von mehreren Möglichkeiten, wie Nutzer sie installieren können. Alternativ können sie das Chrome-Menü, die Miniinfoleiste oder ein Symbol in der Omnibox nutzen. Sie können alle diese Möglichkeiten der Installation verfolgen, indem Sie auf das Ereignis appinstalled
warten.
- Fügen Sie dem
window
-Objekt einenappinstalled
-Event-Handler hinzu. - Protokolliere das Installationsereignis in Analytics oder einem anderen Mechanismus.
Code:
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
Weitere Informationen
Ihre App kann jetzt installiert werden.
Außerdem haben Sie folgende Möglichkeiten: