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

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

Auf Desktop-Seiten wird der Nutzer normalerweise nicht darüber informiert, Die App ist installierbar. Falls ja, ist der Installationsablauf in den drei Punkt-Menü.

In Chrome 76 (Beta Mitte Juni 2019) erleichtern wir Nutzern die Installation Bei progressiven Web-Apps auf dem Desktop wird eine Installationsschaltfläche zur Adresse hinzugefügt. (Omnibox). Wenn eine Website die Kriterien für die Installierbarkeit progressiver Web-Apps Chrome zeigt automatisch ein Installationssymbol in der Adressleiste an. Wenn Sie auf das fordert den Nutzer auf, die PWA zu installieren.

Wie bei anderen Installationsereignissen können Sie das Ereignis appinstalled beobachten. , um zu ermitteln, 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, die App zu installieren, Wenn z. B. Nutzende Ihre App mehr als einmal pro Woche verwenden, sollte die Installation der PWA innerhalb der Web-UI Ihrer App fördern.

Wenn Sie Ihre eigene benutzerdefinierte Installationsschaltfläche hinzufügen möchten, warten Sie auf das Ereignis Ereignis beforeinstallprompt. Wenn es gefeuert wird, einen Verweis auf das Ereignis speichern und Ihre Benutzeroberfläche aktualisieren, damit wissen, dass sie Ihre progressive Web-App installieren können.

Muster zum Bewerben der Installation Ihrer PWA

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

  • Automatisches Browserangebot, z. B. die Installationsschaltfläche der Adressleiste.
  • Promotion der Anwendungs-UI, bei der UI-Elemente in der Anwendung erscheinen wie Banner, Schaltflächen in der Kopfzeile oder im Navigationsmenü usw.
  • Inline-Werbemuster verwoben die Werbung in den Websitecontent.

Hier findest du Muster zum Bewerben der PWA-Installation (Mobilgeräte). . Der Schwerpunkt liegt auf Mobilgeräten, aber viele der Muster sind anwendbar. für Desktop-Computer erstellt oder angepasst werden können.