Window: beforeinstallprompt-Ereignis
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Das beforeinstallprompt-Ereignis wird ausgelöst, wenn der Browser erkannt hat, dass eine Website als Progressive Web App installiert werden kann.
Es gibt keinen garantierten Zeitpunkt für das Auslösen dieses Ereignisses, es tritt jedoch üblicherweise beim Laden der Seite auf.
Dieses Ereignis wird typischerweise verwendet, wenn eine Web-App eine eigene Benutzeroberfläche innerhalb der App anbieten möchte, die zur Installation einlädt, anstatt die allgemeine Benutzeroberfläche des Browsers zu verwenden. So kann die App mehr Kontext bieten und erklären, warum eine Installation sinnvoll sein könnte.
In diesem Fall wird der Event-Handler:
- Eine Referenz auf das übergebene
BeforeInstallPromptEvent-Objekt speichern. - Die Installationsoberfläche innerhalb der App einblenden (diese sollte standardmäßig ausgeblendet sein, da nicht alle Browser die Installation unterstützen).
Wenn die Person die Installation über die Benutzeroberfläche der App startet, ruft diese die Methode prompt() des gespeicherten BeforeInstallPromptEvent-Objekts auf, um die Installationsaufforderung anzuzeigen.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("beforeinstallprompt", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onbeforeinstallprompt = (event) => { }
Ereignistyp
Ein BeforeInstallPromptEvent. Erbt von Event.
Ereignismethoden
BeforeInstallPromptEvent.prompt()-
Zeigt eine Aufforderung an, die fragt, ob die App installiert werden soll. Diese Methode gibt ein
Promisezurück, das mit einem Objekt aufgelöst wird, das die Entscheidung zur Installation beschreibt.
Beispiele
Im folgenden Beispiel stellt eine App eine eigene Installationsschaltfläche mit der id "install" bereit. Anfangs ist die Schaltfläche ausgeblendet.
<button id="install" hidden>Install</button>
Der beforeinstallprompt-Handler:
- Bricht das Ereignis ab. Dadurch wird auf einigen Plattformen verhindert, dass der Browser seine eigene Installationsoberfläche anzeigt.
- Weist das
BeforeInstallPromptEvent-Objekt einer Variablen zu, damit es später verwendet werden kann. - Blendet die Installationsschaltfläche der App ein.
let installPrompt = null;
const installButton = document.querySelector("#install");
window.addEventListener("beforeinstallprompt", (event) => {
event.preventDefault();
installPrompt = event;
installButton.removeAttribute("hidden");
});
Wenn auf die Installationsschaltfläche der App geklickt wird, geschieht Folgendes:
- Die Methode
prompt()des gespeicherten Ereignisobjekts wird aufgerufen, um die Installationsaufforderung anzuzeigen. - Die Schaltfläche setzt ihren Zustand zurück, indem sie die Variable
installPromptleert und sich wieder ausblendet.
installButton.addEventListener("click", async () => {
if (!installPrompt) {
return;
}
const result = await installPrompt.prompt();
console.log(`Install prompt was: ${result.outcome}`);
installPrompt = null;
installButton.setAttribute("hidden", "");
});
Spezifikationen
| Spezifikation |
|---|
| Manifest Incubations # onbeforeinstallprompt-attribute |