Web-Apps mit dem neuen HTML-Installationselement installieren

Patrick Brosset
Patrick Brosset
Startseite

Veröffentlicht am 12. Mai 2026

Für die Installation von Webanwendungen war schon immer JavaScript erforderlich. Wenn Sie das beforeinstallprompt-Ereignis verwenden, findet der Installationsablauf vollständig im Skript statt. Das neue <install> Element ändert das: Fügen Sie einfach ein einzelnes HTML-Element in Ihre Seite ein und der Browser rendert eine vertrauenswürdige Schaltfläche zum Installieren für Sie. JavaScript ist nicht erforderlich.

Image

Das Microsoft Edge-Team hat in Zusammenarbeit mit dem Chrome-Team das <install> Element in Chromium implementiert. Sie können es jetzt hinter einem Flag in Chrome oder Edge ab Version 148 testen. Außerdem ist es als Ursprungstest verfügbar, den Sie in beiden Browsern ab Version 148 bis Version 153 verwenden können.

Probieren Sie es aus und vergleichen Sie es mit der imperativen Web Install API (navigator.install()), für die ein eigener Origin Test verfügbar ist.

Das Problem

Die Installation von Webanwendungen ist fragmentiert. Jeder Browser hat eigene Einstiegspunkte, z. B. Symbole in der Adressleiste, Menüelemente und Eingabeaufforderungen. Entwickler haben nur begrenzte Kontrolle darüber, wann und wie der Installationsablauf angezeigt wird.

Es ist schwieriger, eine App-Store-ähnliche Umgebung zu erstellen, in der Nutzer andere Apps von Ihrer Website installieren können, da die Installation bisher auf die aktuelle Seite beschränkt war.

Das <install> Element

Inhalt und Darstellung des neuen <install> HTML-Elements werden vom Browser gesteuert. Ähnlich wie bei anderen Berechtigungselementen wie <geolocation> kann der Browser die Nutzeraktion als echtes Signal der Absicht betrachten, da er die Kontrolle über den Labeltext, die Sprache und das Erscheinungsbild der Schaltfläche hat.

Ein Nutzer, der auf eine Schaltfläche mit der Aufschrift „Wunderbare Anwendung installieren“ klickt, wird wahrscheinlich nicht überrascht sein, wenn eine Installationsaufforderung angezeigt wird.

Da der Browser die Schaltfläche rendert, erhalten Sie eine vertrauenswürdige Installationsmöglichkeit mit minimalem Code und ohne dass Sie die beforeinstallprompt-Zeremonie in JavaScript orchestrieren müssen.

Aktuelle App installieren

Wenn die aktuelle Seite auf ein Manifest mit einem id Feld verweist, benötigen Sie nur ein einziges Element:

<install></install>

Der Browser rendert die Schaltfläche mit standardisiertem Text und standardisierten Symbolen. Wenn der Nutzer darauf klickt, wird der normale Installationsablauf des Browsers gestartet.

Andere App installieren

Wenn Sie eine Webanwendung installieren möchten, die sich in einem anderen Ursprung als die aktuelle Seite befindet, verwenden Sie das Attribut installurl, um auf die andere Webanwendung zu verweisen:

<install installurl="https://awesome-app.com/"></install>

Wenn die Seite unter https://awesome-app.com auf ein Manifest verweist, in dem ein id Feld definiert ist, ist das alles, was Sie tun müssen.

Wenn kein id-Feld vorhanden ist, verwenden Sie das Attribut manifestid, um eine berechnete Manifest-id anzugeben:

<install installurl="https://awesome-app.com/"
  manifestid="https://awesome-app.com/?source=pwa">
</install>

So rufen Sie die berechnete Manifest-id ab:

  1. Öffnen Sie die Entwicklertools.
  2. Rufen Sie den Tab Anwendung auf.
  3. Kopieren Sie im Bereich Identität den Wert Berechnete App-ID.

Wenn Sie die Schaltfläche <install> verwenden, um Apps aus anderen Quellen zu installieren, können Sie eine Katalogseite erstellen, auf der Nutzer mehrere Apps installieren können, die jeweils eine eigene <install> Schaltfläche haben.

Fallback-Inhalte bereitstellen

Wenn der Browser das <install>-Element nicht unterstützt, wird der HTML-Code angezeigt, den Sie in das Element eingefügt haben:

<install installurl="https://awesome-app.com/">
  <a href="https://awesome-app.com/">Launch Awesome App</a>
</install>

Unterstützung erkennen

Wenn die Fallback-Inhalte für Ihren Anwendungsfall nicht ausreichen und Sie in Browsern, die das <install> Element nicht unterstützen, eine andere Nutzererfahrung implementieren möchten, können Sie die Unterstützung mit JavaScript erkennen:

if ('HTMLInstallElement' in window) {
  // The <install> element is supported.
}

Ereignisse verarbeiten

Das <install> Element löst Ereignisse aus, auf die Sie warten können, um Informationen zu erfolgreichen Installationen, Ablehnungen, und Validierungsfehlern zu erhalten:

const button = document.querySelector('install');

button.addEventListener('promptaction', () => {
  console.log('Installation succeeded');
});

button.addEventListener('promptdismiss', () => {
  console.log('User dismissed the install prompt');
});

button.addEventListener('validationstatuschanged', (e) => {
  if (e.target.invalidReason === 'install_data_invalid') {
    console.error('Invalid install data:', e.target.invalidReason);
  }
});

Jetzt ausprobieren

Sie haben zwei Möglichkeiten, das <install>-Element auszuprobieren:

  • Testen Sie das Element nur lokal auf Ihrem Gerät.
  • Testen Sie das Element unter realen Bedingungen mit Ihren Nutzern, indem Sie sich für den Ursprungstest registrieren.

Lokal testen

So testen Sie das Element auf Ihrem eigenen Gerät:

  1. Verwenden Sie Chrome oder Edge ab Version 148.
  2. Rufen Sie in einem neuen Tab about://flags/#web-app-install-element auf.
  3. Setzen Sie Web App Install Element auf Enabled.
  4. Starten Sie den Browser neu.

Testen Sie auf Ihrer Livewebsite mit dem Ursprungstest

Mit dem Ursprungstest können echte Nutzer auf Ihrer Produktionswebsite die Funktion verwenden, ohne das Flag zuerst aktivieren zu müssen.

  1. Öffnen Sie die Registrierungsseite für den Ursprungstest des <install>-Elements .
  2. Melden Sie sich an.
  3. Klicken Sie auf Registrieren.
  4. Geben Sie die Quelle Ihrer Website ein und füllen Sie den Rest des Formulars aus.
  5. Nach dem Einreichen des Formulars erhalten Sie einen Tokenstring.
  6. Fügen Sie den Token mit einem <meta>-Tag zu den Seiten Ihrer Website hinzu:
<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

Alternativ können Sie den Token auch als HTTP-Antwortheader senden:

Origin-Trial: YOUR_TOKEN_HERE

Der Ursprungstest ist für Chrome und Edge in den Versionen 148 bis 153 verfügbar. Derselbe Token funktioniert in beiden Browsern. Weitere Informationen zu Origin-Tests:

Beispiele ansehen

Sehen Sie sich die <install> Element Store Demo an, einen PWA-Katalog, in dem Sie mit dem <install> Element mehrere Beispiel- Apps installieren können.

Vergleich mit der Web Install API

Das <install> Element ist nicht die einzige Möglichkeit, mit der wir experimentieren, um die Installation von Apps im Web zu verbessern.

Zuvor haben wir mit der Web Install API (navigator.install()) experimentiert. Dabei handelt es sich um eine imperative JavaScript API, mit der Ihre Website auch die Installation von Webanwendungen aus derselben oder einer anderen Quelle auslösen kann. Weitere Informationen finden Sie unter Die Web Install API ist bereit für Tests.

Für die Web Install API ist auch ein eigener Ursprungstest verfügbar.

So schneiden die beiden Ansätze im Vergleich ab:

Element navigator.install() API
Ansatz Deklaratives HTML Imperatives JavaScript
Erforderlicher Code Ein einzelnes HTML-Element JavaScript zum Aufrufen von navigator.install() und zum Verarbeiten des zurückgegebenen Promise
Browservertrauen Hoch: Der Browser steuert Inhalt und Darstellung der Schaltfläche, ähnlich wie bei Berechtigungselementen. Niedrig: Erfordert eine Nutzeraktivierung (Klick, Tippen) als Vertrauenssignal.
Installation aus anderer Quelle Ja, mit installurl Ja, indem Sie eine URL an navigator.install() übergeben
Anpassung Minimal: Der Browser entscheidet, wie die Schaltfläche aussieht. Vollständig: Sie entwerfen Ihre eigene Benutzeroberfläche und rufen die API über eine beliebige Interaktion auf.
Fallback Integriert: Untergeordnete Inhalte werden gerendert, wenn das Element nicht unterstützt wird. Sie schreiben Ihre eigene Feature-Erkennungs- und Fallback-Logik.
Optimal für Installationsschaltflächen mit minimalem Code; Szenarien, in denen eine vom Browser vertrauenswürdige Benutzeroberfläche wünschenswert ist Benutzerdefinierte Installationsabläufe, dynamische Katalog-Benutzeroberflächen, Integration in vorhandene JavaScript-lastige Schnittstellen

Ihre Meinung zählt

Wir freuen uns über Feedback zu beiden Ansätzen. Je nach Ihren Anforderungen können wir Unterstützung für das <install> Element, die navigator.install() API, oder beides hinzufügen.

Wenn Sie Feedback zum <install>-Element geben möchten, erstellen Sie ein Problem im WICG-Repository, das diesem Vorschlag gewidmet ist.

Wenn Sie Feedback zur navigator.install() API geben möchten, fügen Sie einen Kommentar zum Problem Entwicklerfeedback: navigator.install im Vergleich zum <install> Element hinzu.

Ressourcen