Progressive Web-Apps lassen sich ganz einfach über eine neue Schaltfläche in der Adressleiste (Omnibox) von Chrome installieren.
Auf dem Computer gibt es in der Regel keinen Hinweis darauf, dass eine Progressive Web App installiert werden kann. Wenn dies möglich ist, ist der Installationsvorgang im Dreipunkt-Menü verborgen.
In Chrome 76 (Beta Mitte Juni 2019) wird es für Nutzer einfacher, Progressive Web-Apps auf dem Desktop zu installieren, da wir der Adressleiste (Omnibox) eine Schaltfläche zum Installieren hinzufügen. Wenn eine Website die Installationskriterien für Progressive Web-Apps erfüllt, wird in Chrome automatisch ein Installationssymbol in der Adressleiste angezeigt. Wenn der Nutzer auf die Schaltfläche klickt, wird er 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 Nutzer hilfreich ist, Ihre PWA zu installieren, z. B. wenn sie Ihre App mehr als einmal pro Woche verwenden, sollten Sie die Installation Ihrer PWA in der Web-UI Ihrer App bewerben.
Wenn Sie eine eigene Installationsschaltfläche hinzufügen möchten, müssen Sie auf das Ereignis beforeinstallprompt warten. Wenn es ausgelöst wird, speichern Sie einen Verweis auf das Ereignis und aktualisieren Sie die Benutzeroberfläche, um den Nutzer darüber zu informieren, dass er Ihre Progressive Web-App installieren kann.
Muster zum Bewerben der Installation Ihrer PWA
Es gibt drei Möglichkeiten, die Installation Ihrer PWA zu fördern:
- Automatische Browser-Promotion, z. B. die Schaltfläche „Installieren“ in der Adressleiste.
- Werbung in der Benutzeroberfläche der Anwendung, bei der UI-Elemente wie Banner, Buttons in der Kopfzeile oder im Navigationsmenü usw. in der Benutzeroberfläche der Anwendung erscheinen.
- Bei Inline-Werbemustern werden Werbeaktionen in den Websitecontent eingebunden.
Weitere Informationen finden Sie unter Muster für die Bewerbung der PWA-Installation (Mobilgeräte). Der Schwerpunkt liegt auf Mobilgeräten, aber viele der Muster sind auch auf Desktop-Geräte anwendbar oder können leicht für Desktop-Geräte angepasst werden.