Adressleisten-Installation für progressive Web-Apps auf dem Desktop

Progressive Web-Apps lassen sich ganz einfach über eine neue Schaltfläche in der Chrome-Adressleiste (Omnibox) installieren.

Auf dem Computer wird Nutzern in der Regel nicht angezeigt, dass eine progressive Webanwendung installiert werden kann. Falls dies der Fall ist, ist der Installationsvorgang im Dreipunkt-Menü ausgeblendet.

In Chrome 76 (Betaversion Mitte Juni 2019) können Nutzer progressive Web-Apps auf dem Computer noch einfacher installieren, da die Adressleiste (Omnibox) jetzt eine Installationsschaltfläche enthält. Wenn eine Website die Installationskriterien für progressive Webanwendungen erfüllt, wird in Chrome automatisch ein Installationssymbol in der Adressleiste angezeigt. Durch Klicken auf die Schaltfläche wird der Nutzer aufgefordert, die PWA zu installieren.

Wie bei anderen Installationsereignissen können Sie auf das Ereignis appinstalled warten, um zu erkennen, ob der Nutzer Ihre PWA installiert hat.

Eigene Installationsaufforderung hinzufügen

Wenn es für Ihre PWA Anwendungsfälle gibt, bei denen es für Nutzer hilfreich ist, Ihre App zu installieren, z. B. wenn Nutzer Ihre App mehr als einmal pro Woche verwenden, sollten Sie die Installation der PWA innerhalb der Web-UI Ihrer App bewerben.

Wenn Sie eine benutzerdefinierte Schaltfläche zum Installieren hinzufügen möchten, warten Sie auf das Ereignis beforeinstallprompt. Wenn das Ereignis ausgelöst wird, speichern Sie eine Referenz auf das Ereignis und aktualisieren Sie die Benutzeroberfläche, damit der Nutzer weiß, dass er Ihre Progressive Web-App installieren kann.

Muster zur Förderung der Installation Ihrer PWA

Es gibt drei wichtige Möglichkeiten, die Installation Ihrer PWA zu fördern:

  • Automatische Browserwerbung, z. B. die Schaltfläche „Installieren“ in der Adressleiste.
  • Werbung in der App-Benutzeroberfläche, bei der UI-Elemente in der App-Benutzeroberfläche angezeigt werden, z. B. Banner, Schaltflächen im Header oder Navigationsmenü.
  • Bei Inline-Werbemustern werden Werbeinhalte in den Websitecontent eingewoben.

Weitere Informationen finden Sie unter Muster für die Bewerbung der PWA-Installation (mobil). Der Schwerpunkt liegt auf Mobilgeräten, aber viele der Muster sind auch für Computer geeignet oder können leicht so angepasst werden, dass sie für Computer funktionieren.