Account
mittl medien | Webentwicklung in Stuttgart

miTT PWA (Progressive Web App) für Joomla

Einrichtung und Dokumentation einer Progressive Web App in Joomla.

Progressive Web App

Technisch gesehen besteht eine Progressive Web App aus einem Service Worker, welcher alle Request zwischen Server und Browser kontrolliert. Voraussetzung ist, dass die Inhalte verschlüsselt übertragen werden. Das Manifest dient unter anderem, dass bei Installation der App auf einem Endgerät das App Icon dargestellt wird. Eine detailierte Erklärung über Progressive Web Apps (PWA) und welche Optimierungen bei einer PWA vorgenommen werden können, finden Sie in den Artikeln.

Dokumentation miTT PWA FIRE PUSH Einstellungen für Firebase Cloud Messaging

Dokumentation miTT PWA ONE PUSH Einstellungen für das Versenden von Push Nachrichten über One Signal

Installation miTT PWA Progressive Web App für Joomla

Joomla miTT PWA (Progressive Web App) installieren

Nach erfolgreicher Installation können die Einstellungen vorgenommen werden. Hierzu geht man in den Bereich Plugins und öffnet miTT PWA. Indem man das Plugin aktiviert und speichert wird erstmals der Service Worker Datei erstellt. Um einen korrekte Funktion zu gewährleisten sollte wie folgt das Joomla PWA Plugin konfiguriert werden.

Service Worker Version

Beim Erstaufruf der Webseite (Frontend) wird der Service Worker installiert bzw. registriert. Ab diesem Zeitpunkt wäre die Webseite eine PWA mit nur geringer Funktion. Der Parameter Service Worker Version dient dazu, um den statischen Cache zu versionieren. Bei Änderung der Versionsnummer wird der Service Worker bei Aufruf der Webseite dazu veranlasst, dass der alte Cache im Browser gelöscht, sowie ein neuer angelegt wird. Bei jeder Änderung im CSS oder Javascript sollte die Versionsnummer geändert werden, so dass der Nutzer immer mit den neuesten Änderungen versorgt wird.

Zeitintervall für die Aktualisierung der Joomla PWA

Bei Änderungen am Service Worker d.h. Änderungen an der PWA beim Benutzer einzuspielen, dient die Einstellung "Zeitintervall für die Aktualisierung des Service Workers". Hier wird im Hintergrund der Service Worker beim Benutzer auf den aktuellen Stand gebracht, die im Cache liegenden Dateien gelöscht und die statischen Files aktualisiert, sofern eine neue festgelegte Service Worker Version festgelegt wurde. Der Testmode dient nur zur Überprüfung, da das Zeitintervall sehr kurz gesetzt ist. Die empfohlene Einstellung dafür liegt bei 3 bis 23 Stunden.

Sollte man planen an der Joomla Webseite mehrere Änderungen oder an den statischen Dateien CSS, JS vorzunehmen, dann darf die Einstellung auch kürzer sein. Die Aktualisierung des Service Worker wird nur dann vorgenommen, wenn das Joomla Plugin miTT PWA mit einer neuen Service Worker Version gespeichert wird.

Register Service Worker Async

Hier wird lediglich bestimmt, wie die Registrierung erfolgen soll. Sollte es bei der Registrierung Installation Probleme geben, kann die Async Registrierung auf nein gestellt werden.

Unregister Service Worker

Sollte man die PWA Unterstützung nicht mehr wünschen bzw. der Service Worker fehlerhaft ist, dann besteht die Möglichkeit in dieser Einstellung es vorzunehmen. Diese Funktion sollte nur dann gewählt werden, wenn die PWA nicht mehr benötigt wird.

Tab Caching - Cache First oder Network First

Joomla Progressive Web App Caching - Network First - miTT PWA

Cache First

Die Entscheidung, ob Cache First, Network First oder Cache First in Abhängigkeit von der effektiven Internetverbindung kann hier getroffen werden.

Cache First bedeutet, dass alle im Service Worker Cache befindlichen Dateien ausgelesen werden und bie diesem Request aktualisiert werden. Wenn Cache First aktiv dann sind inhaltliche Änderungen erst beim zweiten Aufruf sichtbar. Jedoch spürt man einen deutlicheren Vorteil im Bezug auf die Geschwindigkeit. Sollte Internetverbindung und die aufgerufene Seite fehlen, dann wird auf die Offline Page zurückgegriffen.

Network First

Bei Network First werden immer die aktuellen Inhalte abgerufen und im Hintergrund der Offline Cache aktualisiert. Sollte keine Internetverbindung vorhanden sein, dann wird geprüft, ob die entsprechende Seite im Cache liegt. Im Falle des Nichtvorhandenseins würde die konfigurierte Offline Seite angezeigt werden. Die Statischen Files werden vom Service Worker Cache geholt, so dass diese immer schnell ausgeliefert werden können.

Cache First - Network First in Abhängigkeit von der Internetgeschwindigkeit

Joomla Progressive Web App Caching - Network Network Connection - miTT PWA

Bei Auswahl von Network First besteht die Möglichkeit bei schlechter Internetverbindung die Strategie Cache First in Abhängigkeit zu der Qualität der momentanen Internetgeschwindigkeit zu wählen. Dabei wird die effektive Netzwerkverbindung bezüglich Geschwindigkeit und Latenz ermittelt. Der Wert ergibt dann entweder "slow-2g", 2g, 3g oder 4g. Das miTT PWA Plugin für Joomla ermöglicht die Konfiguration der entsprechenden effektiven Geschwindigkeiten, so dass dann der gewählte Wert und schlechter die PWA Netzwerk StrategieCache Firstzum tragen kommen würde.

Wie aktualisieren Sie Ihre statischen Dateien (Browser-Cache-Benutzer) in der PWA?

CDN

Sollten Dateien über CDN geladen werden oder es wird ein CDN Plugin benutzt, um Dateien verteilt darüber zu empfangen, ist die Einstellung CDN auf "Ja" vorzunehmen. Wenn es lediglich um Google Fonts handelt, darf die Einstellung auf nein bleiben. Bei Benutzung eines CDN Plugins dürfen Inline Scripte nicht über das CDN ausgegeben werden, ansonsten ist eine Registrierung des Service Workers nicht möglich.

Statischer Cache

Joomla Progressive Web App Caching - Static Cache - miTT PWA Plugin

Der statische Cache dient dazu, beim Erstaufruf der Seite die entsprechenden Files zu hinterlegen. Hier ist empfehlenswert, dass die benötigten Javascript und CSS Dateien gespeichert werden, um diese dann zu laden, um die Offline Seite aufzurufen oder wenn kein Internet besteht. Hierzu sollte alle Dateien, die im Header sind bzw. benötigt werden eingetragen werden. Der Inhalt der Seite selbst wird in einen separaten Cache gelegt.

Joomla Progressive Web App Caching - Static Cache List - miTT PWA Joomla Plugin

Um den statischen Cache einzutragen, gibt es 2 Möglichkeiten, man kann einzeln die Pfade nacheinander eintragen oder man benutzt das Texteingabefeld, um gleichzeitig mehrere Pfade hinzuzufügen. Bei Wahl des Texteingabefelde müssen die Pfade durch Kommas getrennt sein. Eine neue Zeile nacht dem Komma wahrt die Übersichtlichkeit.

Bei Änderungen der Files des statischen Cache ist die Service Worker Version (Einstellung im Tab Plugin) zu ändern, so dass ein neuer Cache im Browser beim nächsten Aufruf der PWA bzw. Webseite angelegt wird.

Cache Ausnahmen

Joomla Progressive Web App Cache Ausnahmen - miTT PWA Joomla Plugin

Wie zuvor bereits erwähnt wird der Inhalt der aufgerufenen Seite in einen Cache names 'pages" gelegt. Wenn man bestimmte Seiten und Bereiche nicht in den Cache legen will, könnte man diese hier ausschließen. Hierzu wählt man den Begriff, welcher in der URL vorkommt. Dann werden all die Seiten, die den Begriff in der Url enthalten nicht gecached und daraus geladen. Als Beispiel wäre es die Login Seite.

Offline Seite

Die Offlineseite kann bei Wunsch konfiguriert werden. Unter folgendem Pfad /plugins/system/mittpwa/offline.html ist die Offline Seite in der Joomla Installation zu finden. Das ist eine reine HTML Seite und kann beliebig editiert werden. Eine Möglichkeit wäre den kompletten Quelltext aus dem Browser zu kopieren und dann in die offline.html einzufügen. Der Inhalt zwischen Body kann dann gelöscht und angepasst werden.

Manifest

Joomla PWA Manifest

Das Manifest ist unter anderem dafür verantwortlich, dass die Progressive Web App installiert werden kann. In diesem Tab könnte das Manifest auch deaktiviert werden, falls es nicht gewünscht wird. Bei Verwendung eines eigenen Manifest oder Anpassung könnte man das Überschreiben beim Speichern des Plugins deaktivieren.

Entscheiden Sie wie Ihre App heißen soll und mit welcher Seite die App starten soll. Dazu geben Sie einfach die Url ohne die Domain an (z.B. /startseite). Als Default ist die Startseite (/) hinterlegt.

App Kurzbefehle (App Shortcuts)

Joomla PWA App Shortcuts

Um App Kurzbefehle bzw. Schnell-Navigation zu nutzen aktivieren man diese. Danach können die App Kurzbefehle wie der Name, Beschreibung und Icon definiert werden. Die Schnell-Verknüpfungen verweisen auf einen Joomla Menülink. Das Icon sollte in der Größe 192 x 192px als PNG definiert sein. App Kurzbefehle (App Shortcuts) wird ab Chrome Version 84 unterstützt.

Joomla PWA Theme Color

Passen Sie noch die Farben Ihrer PWA an und wie die App dargestellt werden soll. Sollten Sie sich für "Fullscreen" oder einen Darstellung ohne Browsernavigation entscheiden, sollte man technisch sicherstellen, dass die Navigation reibungslos ohne Browser funktioniert.

Die verschieden Betriebssysteme eines Android Smartphone stellen die Icons unterschiedlich dar. Um dennoch in gutes Ergebnis zu erzielen gibt es das Maskable Icon. Um dieses Icon zu erstellen, hilft der Maskable-App-Editor. Um dieses Feature zu nutzen, sollte die Einstellung auf "any maskable" stehen, andernfalls wird der Default Value "any" verwendet.

Da man nicht nur ein Icon benötigt, ist die Beste Methode einen Manifest Generator wie den von Firebase zu verwenden. Altenativ kann man die Icons im gewünschten Format erstellen, welches wie folgt zu definieren ist. icon-72x72.png
icon-96x96.png
icon-128x128.png
icon-144x144.png
icon-152x152.png
icon-192x192.png
icon-384x384.png
icon-512x512.png

Die Icons legen Sie in einen von Ihnen definierten Ordner wie "icons" und legen diesen in den Joomla Ordner "/images/.." ab. Diesen Ordner können Sie dann ein den Einstellung des Plugins auswählen. Sollten diese Icon auch für Apple im Header hinzugefügt werden, dann stellen Sie das auf ja.

iOS Statsu Bar und iOS Install Banner PWA

Joomla PWA Manifest

Falls vom Template noch keine Apple Icons hinzugefügt werden, kann das hier durch den Button erfolgen.

Apple iOS bietet noch keine Möglichkeit über einen Button die Web App auf dem iPhone zu installieren. Um die Progressive Web App auf dem iOS Smartphone zu installieren, muss diese dem Homescreen hinzufügt werden. Über diesen Button kann der Hinweis-Banner zur Installation eingeblendet werden.

Die obere Leiste auf dem iOS Geräte, welche Uhrzeit, WLan Status und Battery enthält, nennt sich iOS Status Bar. Die kann mit dem "default" Wert für weißer Hintergrund und schwarzer Text definiert werden. Black steht für schwarzer Hintergrund und "black-translucent" nimmt den Hintergrund des Body HTML Elements an. Die Textfarbe ist weiß. Um die iOS Status Bar in gleicher Farbe wie die Navigation zu gestalten, muss die Body Farbe im Template dementsprechend angepasst werden.

Custom bzw. eigener Install Button für die PWA

Custom Installation Banner Joomla PWA

Je nach App ist eine eigene Installationsmöglichkeit einer PWA sinnvoll. Bei Aktivierung wird die der Standard Banner vorerst blockiert. Dadurch kann ein eigener Button in die Webseite eingebunden werden. Dieser Button muss die CSS Klasse "mittpwa__install__a2hs" haben, um den Trigger der Installation der PWA auslösen zu können. Der Installations-Button wird im Safari Browser und Firefox Desktop Version ausgeblendet. Sollte der Browser die Installation einer PWA nicht unterstützen, ist der Button inaktiv bzw. nicht anklickbar. Hier der Beispielcode mit der zugehörigen Klasse:

<button class=" mittpwa__install__a2hs">Install</button>

Der Button kann über ein Joomla Modul, über einen Joomla Beitrag oder das Standard Template eingebunden werden. Sollte kein Installationhinweis gewünscht werden, kann der "Install Prompt" der PWA auch unterdrückt werden.

Periodic Background Sync

Joomla PWA Periodic Background Sync

Unter dem Tab Sync kann in der mobilen Web App (Joomla PWA), die Hingrund-Syncronisation für HTML und Images eingestellt werden. Hier werden im Hintergrund die Inhalte der Urls jeweils in den eingestellten Intervallen syncronisiert. Der Webseitenbesucher muss meist dieser Aktion zustimmen. Die konfigurierbare Sync Intervall ist ein Richtwert, da der Browser bei verschiedenen Kriterien wie geringer Akku oder hoher CPU Auslastung keine Hintergrund Aktualisierung durchgeführt wird. Zudem lässt miTT PWA keinen Sync zu, falls kein freier Speicherplatz auf dem mobilen Endgerät verfügbar ist.

Die Hintergrund Syncronisation einer PWA ist dann sehr sinnvoll, wenn die Inhalte oft aktualisiert werden und man eine hohe Offline Experience mit aktuellen Daten dem Benutzer zur Verfügung stellen möchte. Auch Inhalte die der Webseitenbesucher noch nicht aufgerufen hat, können so in den Cache wandern.

Um dem Nutzer dies zu ermöglichen kopieren Sie einfach die Url aus der Adresszeile der Beitrage oder des Bildes ohne den Webseiten Namen in die dafür vorgesehenes Eingabefeld Url Pfad. Dieses Feature steht allen neueren chrome-basierten Browsern wie Chrome und Edge zur Verfügung.

Testing der Joomla PWA

Um zu Überprüfen, ob alles wie gewünscht funktioniert ist im erste Test der Chrome Browser empfehlenswert, da hier Tools zur Verfügung gestellt werden. Eine Grundbedingung für die korrekte Installation des Service Workers ist eine verschlüsselte Webseite. Um es in einer lokalen Umgebung ohne Verschlüsselung zu testen, muss die Seite auf localhost erreichbar sein und in der Browserzeile auch http://localhost stehen.

Im Chrome Browser öffnen man die Console und wechselt in den Tab "Application". Sofern die der Service Worker korrekt installiert ist, wird ein gründes Icon bei Status angezeigt. Desweiteren kann über der Offline Modus sehr einfach simuliert werden, dazu setzt man einfach das Häkchen.

Chrome Browser Console Joomla PWA

Lighthouse PWA Test

Google stellt mit dem Chrome Browser auch Lighthouse zur Verfügung, um die Webseite nach Performance, Progressive Web App, Best Practices, Accessibility und SEO zu prüfen. Ein Test zeigt, ob die Webseite die Funktionalitäten einer PWA besitzt.

Falls der Fehler "start_url does not respond with a 200 when offlineThe start_url did respond, but not via a service worker., dann sollte man überprüfen ob die Startseite Offline verfügbar ist. Am einfachsten ist in Chrome Browser unter "Application" das Offline Häckchen zu setzen.

Alternativ kann auch auch Firefox "Lighthouse" hinzufügen, indem man diesen Link in die Bookmark Liste des Browser zieht oder mit Rechtsklick in die Bookmark Liste aufnimmt. Danach besucht man die gewünschte Seite und klickt auf diesen Link und ein Lighthouse Test wird durchgeführt.

Changelog miTT PWA für Joomla

Joolmla PWA Changelog

In diesem Tab werden die Änderungen dokumentiert, um zu sehen welche neue Features vorhanden sind, sowie welche auftretende Probleme behoben wurden. Um von den neuen Funktionen zu profitieren neben der Aktualisierung ist auch die Speicherung des Plugins nötig.

Dokumentation miTT PWA FIRE PUSH

erweiterte Einstellungen für miTT PWA FIRE PUSH

Lesen Sie mehr...

Dokumentation miTT PWA ONE PUSH

erweiterte Einstellungen für miTT PWA ONE PUSH

Lesen Sie mehr...