15 Tipps Optimierung einer PWA

Wie sie Ihre PWA verbessern, die User Experience steigern und Ihren Besuchern ein Natives App Gefühl verleihen

1. Erstellen eines Manifest

Neben dem Service Worker ist das Manifest das Herzstück einer PWA. Hier erkennt der Browser, ob es sich um eine installierbare PWA handelt. Das Manifest ist eine JSON Datei, bei welcher Icons, Theme Colour, Start Url und Splash Screen definiert werden. In der Chrome Browser Console kann man feststellen, ob man eine gültige Manifest-Datei implementiert hat. Für die Erstellung eines Grundgerüst gibt es Generatoren wie z. B. den Web App Manifest Generator im Internet.

2. Erweitern des Manifest mit Shortcuts

Aus Nativen Apps kennen wir bereits die Shortcuts, hier tippt man länger auf das App Icon und erhält ein zusätzliches Auswahlmenü, um vordefinierte Aktionen aufzurufen. Diese Funktion ist jetzt auch für Progressive Web Apps verfügbar. Bei langem Tippen auf des Icon auf dem Home Screen werden verschiedene Kurzbefehle angezeigt, welche über das Manifest definiert wurden. Dadurch kann der Benutzer schnell die gewünschte Funktion der PWA aufrufen.

3. Bereitstellen eigener Install Buttons

Bei Bereitstellung eines gültigen Manifest und eines Service Workers kommt bei mehrmaligem Aufruf der Webseite bzw. PWA ein Pop-Up mit dem Hinweis, dass die Web App installiert werden kann. Der Browser bestimmt, wann dieses Pop-Up erscheint d.h. man hat hier wenig Einfluss darauf wann dieser Hinweis angezeigt wird. Diese Pop-Up Funktion mit dem Vorschlag zur Installation der PWA wird in iOS 13 noch nicht unterstützt.

Will man den Installationshinweis der PWA bewusst steuern, unterdrückt man diesen im Service Worker im Event "beforeinstallprompt". Dann ist es möglich einen eigenen Install Button für Android und iOS zu implementieren.

Eine andere Möglichkeit für iOS ist die “Add to Homescreen” über die Standalone Funktion abzurufen und diesen Hinweis einzubinden.

4. Definieren der App Strategie

Die App Strategie legt fest, wie man seine Benutzer mit den verschiedenartigen Endgeräten ansprechen möchte. Hierzu zählen Performance, Datenspeicher und welche Internetverbindung zur Verfügung gestellt wird. Eventuell besteht die Möglichkeit bei einem leistungsschwachen Endgerät den Standard auszuliefern und für ein leistungsfähigeres Gerät alle Möglichkeiten zu präsentieren.

Mit Performance Observer kann die Leistung der benutzten Geräte abgefragt und darauf ausgerichtet bzw. gesteuert werden.

Neben der Peformance des Endgerätes könnte auch der Batterie Status geprüft werden, ob man eventuell eine Background Sync startet oder ein Update der App durchführt.

Auch die Cache Strategie gehört zu App Strategie und wird im nächsten Tipp für PWA behandelt.

5. Festlegen der Cache Strategie

Bei der Cache Strategie wird festgelegt, wann Inhalte vom Server und zu welchem Zeitpunkt Daten vom Cache geladen werden (Network First oder Offline First). Die Strategie kann von der verfügbaren Internetverbindung also Geschwindigkeit oder verfügbares Netz abhängig gemacht werden. Eine zusätzlicher Punkt ist der eventuell aktivierte Datensparmodus des Smartphones. Somit kann man auf die Prioritäten des Benutzers Rücksicht genommen werden.

if (navigator.connection.downlinkMax > 50) { // schnelle Verbindung
   
 }

6. Abfragen nach verfügbarem dauerhaften Speicher (Persist Storage)

Um zu garantieren, dass die Offline Seite auch immer aufrufbar ist und nicht in einer weißen Seite mit einer Fehlermeldung endet, sollte man nach einem dauerhaften Speicher (Persist Storage) fragen. Der Umgang mit dem verfügbaren Speicher sollte immer sparsam sein, um die Ressourcen des Smartphone zu schonen.

if (navigator.storage && navigator.storage.persist)
  navigator.storage.persist().then(function(persistent) {
if (persistent)
   console.log("Speicher wird nicht gelöscht");
   else
   console.log("Speicher könnte unter Umständen gelöscht werden");
});

Überflüssige Dateien oder Bilder könnten über das Message Event aus dem Cache gelöscht werden, um Speicher aus dem Smartphone des Benutzers freizugeben.

7. Implementieren der Web Share API und Web Share Target V2 API

Mit der Web Share API besteht die Möglichkeit dem Benutzer der PWA oder Webseite "einfaches Teilen" oder "Sharen" an die Hand zu geben. Bei Anwendung erhält der Benutzer das gewohnte Share Menü des jeweiligen Betriebssystems.

Mit der Web Share Target API wird die PWA im Nativen Menü des Betriebssystems angezeigt. Als Beispiel könnten Bilder aus der Foto App in der PWA geöffnet werden, um diese weiter Schritte zu tätigen. Die Progressive Web App (PWA) von Twitter hat dieses Feature bereits implementiert.

8. Einbinden der Payment API

Bezahlung kann im Internet aufwendig sein, da erst die Kreditkarteninformationen eingegeben werden. Mit der Payment API wird dem Benutzer eine deutlichere Erleichterung in der Eingabe gegeben. Google Pay und Apple Pay können hier den Benutzer deutlich bei der Eingabe unterstützen, da hier auf die bereits hinterlegte Kartendaten zurückgegriffen wird.

9. Hinzufügen einer einfachen Authentifizierung

Aufwendiges Registrieren, Passwörter erzeugen und speichern ist mit zeitlichem Aufwand verbunden. Sollte der Benutzer des Smartphones keinen Passwort Manager installiert haben, ist das Merken jedes Passwortes eine Herausforderung. Mit dem Einsatz von Authentifizierungs-Techniken wie OAuth ist es möglich sich z.B. mit dem bereits bestehenden Google, Facebook oder iCloud Account sicher anzumelden.

10. Steuern des App Lifecycle

Jede App hat einen Lifecycle der in den einzelnen Phasen beeinflusst werden kann. Die App geht in den Hintergrund, wird beendet, erneut aufgerufen. Hier kann auf die einzelnen Zustände mit den Events "visibilitychange", "freeze" und "resume" eingegriffen werden.

11. Setzen eines Update Intervall

Ein Update einer PWA wird mit jeder Änderung des Service Workers initialisiert, sofern die Webseite aufgerufen wird. Sollte man im Hintergrund ein Update wünschen kann ein Update Intervall des Service Worker gesetzt werden, um in einem gewissen zeitlichen Abstand eine Update durchzuführen.

navigator.serviceWorker.register("serviceworker.js")
       .then( (registration) => {
 setInterval( () => registration.update(), 86400 )
});

12. Verwenden des Message-Events

Mit dem Message Event kann man zwischen dem Service Worker und dem Benutzer kommunizieren, um z.B über ein Update zu informieren. Bei einer umgekehrten Kommunikation könnte das Message Event dafür genutzt werden, um überflüssige Dateien im Cache zu löschen.

13. Publizieren der App in den App Store oder Google Play Store

Mit dem Gedanken an eine App assoziiert man sofort den Google Play Store oder App Store. Deshalb kann es aus Marketing Sicht sehr sinnvoll sein, eine App im Store zu publizieren. Zu Beachten gilt, dass die Richtlinien (Guidlines) der Store Anbieter erfüllt werden. Zudem sollte berücksichtigt werden, dass Updates im App Store separat publiziert werden. Im Google Play Store reicht das Tauschen der Dateien auf dem Server der Web Applikation aus, da Android die App über eine zertifizierte Url erkennt, welche im Package bereits definiert wurde.

Hilfe für die Erstellung hinsichtlich Store sind PWA Builder (Microsoft), Apple Configurator 2 und WebAPK (Android) sein.

Ein Hinweis hierzu, sollte eine Android Nutzer eine PWA vom Web installieren, ist es später nicht erkennbar, ob es sich um eine PWA vom Web oder um einen native App vom Google Play Store handelt.

14. Erstellen einer Progressive Web App als Desktop Applikation

Mit dem Begriff PWA verbinden wir meist eine App auf einem Smartphone oder Mobilgerät. Google Chrome bringt Progressive Web App als installierbare Applikationen auch plattformübergreifend auf die Desktop Oberfläche. Wenn installiert, können diese als eigenständige Programme auf Windows, MacOSX und Linux aufgerufen werden.

15. Ergänzen um eine Notfall Funktion

Sollte unerwarteterweise etwas nicht funktionieren und der Service Worker lässt sich nicht updaten, dann ist es hilfreich, dass man den Service Worker deinstallieren kann. Ansonsten würde immer der "defekte" Service Worker als Art Ghost Worker laufen. Deswegen sollte man mit der Möglichkeit ausgestattet sein den Service Worker zu entfernen.

Erweiterungen für das CMS Systeme WordPress und Joomla

Die genannten Tipps kommen im meinen Plugins für Wordpress und Joomla erfolgreich zum Einsatz, so das die Webseite als Joomla App oder Wordpress App installierbar ist.

Progressive Web App - PWA
Entwicklung aus Stuttgart

Als professioneller Webentwickler aus dem Raum Stuttgart berate ich Sie über die Umsetzung der verschiedenen Möglichkeiten einer Progressiven Web App, die ganz auf Ihre Ziele und Wünsche ausgerichtet ist.

15 Tipps zur Optimierung einer Progressive Web App (PWA),
die für ein natives App Gefühl sorgen