Progressive Web-Apps lassen sich ganz einfach über eine neue Schaltfläche in der Adressleiste (Omnibox) von Chrome installieren.
Auf dem Computer wird Nutzern in der Regel nicht angezeigt, dass eine Progressive Web-App installiert werden kann. Wenn dies der Fall ist, ist der Installationsvorgang im Dreipunkt-Menü verborgen.
In Chrome 76 (Beta-Version Mitte Juni 2019) wird es für Nutzer einfacher, Progressive Web-Apps auf dem Desktop zu installieren. Dazu wird der Adressleiste (Omnibox) eine Schaltfläche „Installieren“ hinzugefügt. Wenn eine Website die Kriterien für die Installation von Progressive Web Apps 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 Ihre PWA Anwendungsfälle hat, in 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 Ihrer PWA in der Weboberfläche Ihrer App bewerben.
Wenn Sie eine eigene benutzerdefinierte Installationsschaltfläche hinzufügen möchten, warten Sie auf das Ereignis beforeinstallprompt. Wenn das Ereignis ausgelöst wird, speichern Sie einen Verweis darauf und aktualisieren Sie die Benutzeroberfläche, um dem Nutzer mitzuteilen, dass er Ihre Progressive Web-App installieren kann.
Muster zum Bewerben 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 Benutzeroberfläche der Anwendung, bei der UI-Elemente in der Anwendungsoberfläche erscheinen, z. B. Banner, Schaltflächen im Header oder Navigationsmenü usw.
- Bei Inline-Werbemustern werden Werbeaktionen in den Website-Content eingebunden.
Weitere Informationen finden Sie unter Muster für die Förderung der PWA-Installation (Mobilgeräte). Der Schwerpunkt liegt auf Mobilgeräten, aber viele der Muster lassen sich auch auf Desktop-Geräte anwenden oder können leicht für Desktop-Anwendungen angepasst werden.