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

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

Auf einem Desktop gibt es für einen Nutzer normalerweise keinen Hinweis darauf, dass eine progressive Web-App installierbar ist. Ist dies der Fall, wird der Installationsablauf über das Dreipunkt-Menü ausgeblendet.

In Chrome 76 (Beta Mitte Juni 2019) wird es für Nutzer einfacher, progressive Web-Apps auf dem Desktop zu installieren. Dazu wird der Adressleiste (Omnibox) eine Installationsschaltfläche hinzugefügt. Wenn eine Website die Kriterien für die Installierbarkeit von progressiven Web-Apps erfüllt, zeigt Chrome in der Adressleiste automatisch ein Installationssymbol an. 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 festzustellen, 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 sie Ihre App mehr als einmal pro Woche verwenden, sollten Sie die Installation der PWA in der Web-UI Ihrer App bewerben.

Wenn Sie eine eigene benutzerdefinierte Installationsschaltfläche hinzufügen möchten, warten Sie auf das Ereignis beforeinstallprompt. Wenn es ausgelöst wird, speichere einen Verweis auf das Ereignis und aktualisiere deine Benutzeroberfläche, um den Nutzer darüber zu informieren, dass er deine progressive Web-App installieren kann.

Muster zum Hochstufen der Installation Ihrer PWA

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

  • Automatische Browser-Promotion, z. B. die Schaltfläche zur Installation der Adressleiste.
  • Anwendungs-UI-Promotion, wobei UI-Elemente in der Anwendungsoberfläche angezeigt werden, z. B. Banner, Schaltflächen in der Kopfzeile oder Navigationsmenü usw.
  • Durch Inline-Werbemuster wird Werbung in den Inhalt der Website eingebunden.

Weitere Informationen finden Sie unter Muster für die PWA-Installation (Mobilgeräte). Der Schwerpunkt liegt auf Mobilgeräten, aber viele der Muster gelten für Computer oder lassen sich leicht für Desktop-Anwendungen ändern.