[19/24] PWA

von

con4gis Tipps, Tricks und Türchen 19 von 24

An den Türchen-Tagen vor Weihnachten öffnen wir für Euch immer am späten Nachmittag ein neues Tor in das con4gis Universum. Heute zeigen wir Euch wie Ihr mithilfe von con4gis PWA Eure Contao-Website als Progressiv Web App einrichtet.

Progressiv Web Apps ist eine Mischung aus einer responsiv Website und einer nativen App. Mittlerweile können viele Funktionen einer nativen App auch in einer Progressiv Web App verwendet werden. Beim Besuch einer Website die als PWA eingerichtet ist, wird dem Nutzer angeboten die Website dem Startbildschirm hinzuzufügen. Wird der Besucher nicht Benachrichtigt so kann er die Add-To-Homescreen-Funktionalität über die Browser Einstellungen erreichen. Die Progressiv Web App muss also nicht installiert oder aktuallisiert werden.

Des Weiteren kann man auch mit einer PWA Pushnachrichten versenden, hierzu bietet unsere con4gis PWA Erweiterung ein Frontend-Modul zum Abonnieren der Pushnachrichten an.

Auch ohne Internetverbindung kann die Contao-Website als PWA verwendet werden. In der PWA-Konfiguration habt Ihr die Möglichkeit anzugeben welche Seiten gecached werden sollen.

Im Folgenden zeigen wir Euch wie Ihr eine Progressiv Web App für Eure Contao-Website mithilfe von con4gis PWA einrichtet.

Nach der Installation stehen Euch 4 verschiedene Backend-Module zur Konfiguration bereit:

  • PWA-Konfiguration
  • WebPush-Konfiguration
  • Testnachricht senden
  • Push-Abonnement-Typen

Bevor Ihr mit der PWA-Konfiguration startet, müssen wir uns um die verschiedenen Splashscreens (Startbildschirm) sowie die Icons auf dem Homescreen kümmern. Hierfür müssen für Androidgeräte lediglich zwei verschiedene Bildformate hinterlegt werden. Doch für iOS ist es etwas anderes hier müssen mehrere Formate hinterlegt werden, damit auf allen iOS Geräten die richtige Bildgröße angezeigt werden.
Wir benötigen ein Logo in den Formaten:

  • 120x120
  • 152x152
  • 167x167
  • 180x180
  • 192x192
  • 512x512
  • 640x1136
  • 750x1294
  • 1125x2436
  • 1242x2148
  • 1536x2018
  • 1668x2224
  • 2048x2732

PWA-Konfiguration

Sind die Vorbereitungen getroffen können wir mit einer neuen PWA-Konfiguration starten. Als ersten müssen wir alle Einstellungen zur Manifest-Datei machen, die wir anschließend im Startpunkt der Website hinterlegen. Zuerst legen wir einen Namen und eine Kurzform an, hier solltet Ihr überlegen welchen Namen und welche Kurzform Ihr wählt, da diese in der PWA sichtbar sind. Die Kurzform des Namens ist der Name auf dem Homescreen, der unter dem Icon steht. Als nächstes wählt Ihr die Start-URL, die nach dem öffnen der PWA aufgerufen wird. Anschließend legt ihr die Navigationsscope fest also die URL von der alle darunterliegenden URLs angesteuert werden dürfen.

Nun könnt Ihr etwas kreativ werden, bestimmt die Theme und die Hintergrund Farbe Eurer PWA. Wählt sie am Besten so das sie zu Eurer Website passen ;o) Die Themenfarbe ist dann die Farbe der oberen Leiste, in der auch der Akkustand und die Uhrzeit angezeigt werden.

Anschließend wählt Ihr eine Offline-Seite als Fallback, falls der Benutzer nicht mit dem Internet verbunden ist. In unserem Fall bietet sich dort die Startseite an.

Jetzt benötigt Ihr Eure zuvor in verschiedenen Formaten erstellte Logos, wählt diese aus der Dateiverwaltung aus und hinterlegt sie in dem für das Format angegebene Feld.

WebPush-Konfiguration

Als nächstes legt Ihr die WebPush-Konfiguration fest, also die Einstellungen für die Pushnachrichten.
Damit Push-Nachrichten verschlüsselt werden können, gibt es einen öffentlichen und privaten Schlüssel. Falls Ihr hierfür ein eigenes Schlüsselpaar generiert habt oder generieren möchtet, ist dies hier einzufügen. Ansonsten wird beim Speichern automatisch ein Schlüsselpaar erzeugt.
Das Feld "Time to live" legt fest wie lange eine Pushnachricht vorgehalten wird, falls einmal ein Gerät nicht mit dem Internet verbunden ist.
Als letztes könnt Ihr noch ein Benachrichtigungslogo festlegen, welches in der Pushnachricht angezeigt wird.

Push-Abonnement-Typen

Für Push-Nachrichten können im Frontend-Modul der PWA verschiedene Abonnement-Typen zugeordnet werden. Diese lassen sich dann im Frontend verschiedenen Button zuordnen. Somit kann ein Frontend-Nutzer je nach Unterseite verschiedenen Typen zugeordnet werden. Dies ermöglicht das gezielte Versenden bestimmter Nachrichten an ausgewählte Nutzer.

 

Frontend-Module

Nun legt Ihr zwei Frontend-Module an, einmal das PWA-Manifest und einmal den Abonnieren-Button. Diese beiden Module werden dann im Frontend in den Artikeln eingebunden.

Das Manifest-Modul muss zwingend erstellt werden, ohne dies haben die Besucher nicht die Option die Website dem Startbildschirm hinzuzufügen. Im Dropdown-Menü "PWA-Konfiguration" wählt Ihr Eure eben erstellte Konfiguration aus. Wenn Ihr per Events Pushnachrichten verschicken wollt muss die "Contao Cron aufrufen" Checkbox gesetzt werden.

Damit Eure Website Besucher die Pushnachrichten abonnieren können, müsst Ihr das "Pushnachrichten abonnieren" Modul erstellen. Hier könnt Ihr einen Buttontext festlegen, zum einen zum Abonnieren und zum anderen zum Bearbeiten des Abonnements. Außerdem wählt Ihr hier den Push-Abonnement-Typ aus den Ihr zuvor festgelegt habt. Habt Ihr nur einen Abonnement-Typ könnt Ihr die "Auswahl deaktivieren", da sich eine Auswahl mit nur einer Option nicht anbietet.

Frontend-Module in die Artikel einbinden

Das Manifest-Modul bindet Ihr am besten auf Eurer Startseite ein, keine Angst es wird nichts im Frontend angezeigt. Dieses Modul dient nur der Funktion "zum Startbildschirm hinzufügen", im Frontend wird kein Inhalt ausgegeben.
Das "Pushnachricht Abonnieren" Modul bindet Ihr am Besten im Layout ein, da es so auf allen Seiten erscheint und immer vom User gesehen wird. Der Header oder der Footer bieten sich hierfür an.

Wichtig

Alle Änderung werden erst übernommen wenn Ihr die PWA-Konfiguration Eurem "Startpunkt der Website" hinzufügt und speichert.

Genau so ist es nach Änderungen der WebPush-Konfiguration, hier muss der Cache geleert werden. Ihr geht in den Contao-Manager und leert unter Systemwartung den Symfony Anwendungscache.


Viel Spaß mit Eurer neuen PWA!

Zurück