Window: appinstalled — Ereignis · JavaScript-Referenz

Signatur

window.addEventListener("appinstalled", handler)

Beschreibung

Das Ereignis appinstalled gehört zur Web App Manifest API. Es wird am globalen Window-Objekt ausgelöst, wenn der Nutzer die Webanwendung installiert hat. Dabei ist es egal, ob die Installation über eine eigene Installieren-Schaltfläche (mit BeforeInstallPromptEvent.prompt()) oder über die Browser-Oberfläche (Adressleiste, Menü „App installieren“) gestartet wurde.

Typische Einsatzzwecke sind:

Die Installation für Statistiken erfassen, z. B. als Analytics-Ereignis.
Eigene Installations-Schaltflächen oder Banner ausblenden, weil sie danach nicht mehr gebraucht werden.
Den gespeicherten beforeinstallprompt-Event verwerfen, denn er lässt sich nur einmal verwenden.
Dem Nutzer bestätigen, dass die Installation geklappt hat.

Das Ereignis ist ein einfaches Event ohne zusätzliche Eigenschaften. Es bricht nicht durch den DOM auf (bubbles: false) und lässt sich nicht abbrechen. Du kannst es entweder mit addEventListener("appinstalled", …) abonnieren oder über die Eigenschaft window.onappinstalled einen Handler zuweisen.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, immer `"appinstalled"`.
$handler Pflicht	(event: Event) => void		Die Rückruffunktion. Sie bekommt ein einfaches `Event`-Objekt ohne weitere Daten zur installierten App.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Einstellungen wie `once` oder `signal`. Da die Installation meist nur einmal passiert, bietet sich `{ once: true }` an.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler bekommt ein Event mit type === "appinstalled".

Beispiele

Installation mit addEventListener erfassen

window.addEventListener("appinstalled", (event) => {
  console.log(`Ereignis: ${event.type}`);
  console.log("PWA wurde erfolgreich installiert.");
}, { once: true });

Ereignis: appinstalled PWA wurde erfolgreich installiert.

Eigene Installieren-Schaltfläche mit beforeinstallprompt

let deferredPrompt = null;
const installButton = document.querySelector("#install");
installButton.hidden = true;

window.addEventListener("beforeinstallprompt", (event) => {
  event.preventDefault();          // Standard-Hinweis des Browsers unterdrücken
  deferredPrompt = event;
  installButton.hidden = false;
});

installButton.addEventListener("click", async () => {
  if (!deferredPrompt) return;
  deferredPrompt.prompt();
  const { outcome } = await deferredPrompt.userChoice;
  console.log(`Nutzerentscheidung: ${outcome}`);
  deferredPrompt = null;
});

window.addEventListener("appinstalled", () => {
  installButton.hidden = true;   // Schaltfläche wird nicht mehr gebraucht
  deferredPrompt = null;
  console.log("Danke für die Installation!");
});

Nutzerentscheidung: accepted Danke für die Installation!

Handler über die onappinstalled-Eigenschaft setzen und wieder entfernen

const trackInstall = () => {
  // Installation an einen Analytics-Endpunkt melden
  navigator.sendBeacon("/analytics", JSON.stringify({
    event: "pwa_installed",
    time: new Date().toISOString()
  }));
};

// Variante 1: on-Eigenschaft
window.onappinstalled = trackInstall;

// Später wieder abmelden
window.onappinstalled = null;

// Variante 2: addEventListener / removeEventListener
window.addEventListener("appinstalled", trackInstall);
window.removeEventListener("appinstalled", trackInstall);

Prüfen, ob die App bereits installiert läuft

const isStandalone = () =>
  window.matchMedia("(display-mode: standalone)").matches ||
  navigator.standalone === true; // iOS Safari

if (isStandalone()) {
  console.log("Läuft als installierte App.");
} else {
  window.addEventListener("appinstalled", () => {
    console.log("Gerade installiert – beim nächsten Start im App-Fenster.");
  }, { once: true });
}

Gerade installiert – beim nächsten Start im App-Fenster.

// Wichtig · Fallstricke

Browser-Unterstützung: Das Ereignis funktioniert nur in Chromium-basierten Browsern (Chrome, Edge, Opera, Samsung Internet). Firefox und Safari (auch unter iOS) lösen es nicht aus. Das gilt auch dann, wenn Safari die App über „Zum Home-Bildschirm“ oder „Zum Dock hinzufügen“ installiert. Verlass dich deshalb nicht darauf, dass das Ereignis kommt.
Voraussetzungen: Die Seite muss installierbar sein. Dafür braucht sie ein gültiges Web App Manifest (mit name, icons, start_url und display), muss über HTTPS oder localhost ausgeliefert werden und benötigt je nach Browser einen Service Worker.
Keine Details zur App: Das Ereignis enthält keine Angaben zur Plattform oder zum Installationsort. Ob die App bereits installiert ist, prüfst du beim Start mit matchMedia("(display-mode: standalone)") oder mit navigator.getInstalledRelatedApps(). Letzteres gibt es nur in Chromium.
Zeitpunkt: Das Ereignis wird nur in dem Tab ausgelöst, in dem installiert wurde, und nur einmal. Wenn der Nutzer die Seite neu lädt, gibt es kein weiteres Ereignis. Einen Status, den du dauerhaft brauchst, speicherst du deshalb selbst, z. B. in localStorage.
Das Ereignis sagt nichts darüber, ob die App später wieder deinstalliert wird. Für eine Deinstallation gibt es kein entsprechendes Ereignis.

Siehe auch

BeforeInstallPromptEvent BeforeInstallPromptEvent.prompt() Navigator.getInstalledRelatedApps() Window.matchMedia() EventTarget.addEventListener() IDBDatabase: close