Progressive Web App (PWA), unverzichtbar für jede Webseite

PWA dient als weitere Schlüsseltechnologie, um den Erfolg einer Webseite zu steigern

PWAs sind Apps,
die für jeden zugänglich sind

Das Grundprinzip einer Progressiven Web App kurz PWA ist, dass diese von jedem Benutzer verwendet werden kann, unabhängig von Betriebssystem und Browser. Progressive steht für barrierefrei, einfach und leicht zugänglich - für ein freies Web. Barrierefreiheit und Zugänglichkeit scheint im Web immer wichtiger zu werden. Die nachfolgenden Punkte verdeutlichen, dass der Trend Progressive Web App berechtigt ist und Zukunft hat.

Progressive Web App (PWA) für Webseiten

SEO-Vorteil gegenüber einer nativen App

Suchmaschinen wie Bing und Google indexieren Progressive Web Apps

Eine Progressive Web App basiert auf einer responsiven Webseite und ist mit neuen Technologien wie dem Service Worker angereichert. Da die PWA wie eine Webseite erreichbar ist, kann diese auch über Google indexiert und dadurch gefunden werden. Aus jeder guten mobilen Webseite kann auch eine PWA erstellt werden. Grundvoraussetzung ist eine gute Usability, da eine PWA das Gefühl einer nativen App vermitteln soll.

Was benötigt eine Progressive Web App?

Eine PWA zeichnet sich durch verschiedene technische Merkmale aus

Wie oben schon erwähnt, ist der Service Worker der technische Knotenpunkt und das Herzstück einer PWA. Die Webseite muss über das HTTPS-Protokoll übertragen werden, d. h. eine SSL-Verschlüsselung sollte gegeben sein, andernfalls wird der Service Worker nicht registriert. Im Service Worker werden alle Requests der Progressiven Web App geregelt. Dieser fungiert als eine Art Proxyserver. Neben dem Service Worker sollte ein Web App Manifest existieren, um ein PWA installieren zu können. Das Manifest der PWA teilt dem Browser mit, dass es sich um eine Progressive Web App handelt, welche Icons zur Verfügung stehen, wo der Scope der App liegt und welche Farbe der Startbildschirm (Splash Screen) ausgibt. Zudem kann man bestimmen, ob die App als Vollbild (fullscreen), eigenständige Anwendung (standalone), eigenständige Anwendung mit minimalen UI-Elementen (minimal-ui) oder der normale Browser (browser) angezeigt werden soll. Weitere Detailfeatures sind im Manifest definierbar.

Die im Browser zur Verfügung stehende IndexedDB (für clientseitige Speicherung strukturierter Daten) kann perfekt über den Service Worker bzw. PWA angesprochen und genutzt werden um Offline Daten zu speichern. Neben der Datenspeicherung ist der Cache Zugriff ein weiterer Bestandteil, der bei jeder PWA zum Einsatz kommen sollte. Bei einer einfachen PWA wird die IndexedDB meist nicht genutzt, jedoch der Offline Cache im Browser. Sollte man komplexere Datenstrukturen speichern wollen, stehen alternative Datenbanken wie z.B. CouchDB zur Verfügung.

Für eine PWA ist kein App Store oder Google Play Store notwendig

Da Progressive Web Apps über den Browser installiert werden, ist es nicht notwendig den aufwendigen Prozess der Publizierung einer App zu durchlaufen und die Einhaltung der Richtlinien zu beachten. Einerseits kann die Veröffentlichung einer App im Store sehr viel Zeit beanspruchen, andererseits muss man eine gewisse Zeit einplanen, bis diese im App Store oder Google Play Store erscheinen. Zudem fallen für den Vertrieb der Nativen App anteilige Kosten für den Verkauf an. Jedoch müsste man über andere Monetarisierungs-Methoden einer PWA nachdenken, um mit einer PWA Geld zu verdienen, denn ein direkter Verkauf über den App Store ist nicht möglich. Die bereits optimal unterstützte Payment Request API kann dabei helfen, um für bestimmte Features den Benutzer zur Kasse zu bitten. Platzierung von Werbung in der App könnte eine weitere Einnnahmequelle sein, jedoch wird die Attraktivität der Web App dadurch verschlechtert.

Jedoch kann es sinnvoll sein, den Google Play Store als weiteren Marketing Kanal zu nutzen.

Prinzipiell genommen könnte jede Webseite eine PWA sein

Die Geschwindigkeit entscheidet oft über die Verweildauer eines Besuchers auf der Webseite. PWAs sind durch Cache Möglichkeiten sehr schnell. Da Progressive Web Apps nicht installiert werden müssen, merkt der Besucher meist nur indirekt, dass es sich um eine PWA handelt. In der Console des Browsers sieht man wie viele Seiten bereits einen Service Worker registriert bzw. installiert haben. Zur Überprüfung, ob es sich um eine PWA handelt, stellt der Browser Google Chrome “Lighthouse” zur Verfügung. Ein korrektes Manifest ist Grundvoraussetzung für eine PWA.

Offline App

Ein weiterer Charme ist die Offline Verfügbarkeit der Progressive Web App, da der Besucher selbst bei nicht verfügbarem Netz, weiterhin die Inhalte der Webseite konsumieren kann.

Wer möchte schon, dass ein Besucher anstelle der Webseite ein Browserfenster ohne Inhalte vorfindet. Dies ist individuell nach Internetverbindung regelbar, ob der Besucher die gespeicherten Daten im Cache des Browsers vorfindet oder auf die Daten des Servers zugreift.

Festlegen der Cache Strategie einer PWA

Bevor eine Progressive Web App umgesetzt wird, sollte vorab definiert und festgelegt werden, auf welche Daten der Webseitenbesucher Zugriff hat. Offline oder Network First gibt an, welche Inhalte, Contentbereiche oder Bilder ausgegeben werden sollen. Es ist immer möglich auf den Cache zuzugreifen.

App kann installiert werden

Ihre Webseite ist aus den Augen des Besuchers, wenn dieser den Browsertab oder das Browserfenster schließt. Um eine intensivere Kundenbindung zu pflegen, ist durch die Installation einer PWA auf dem Desktop oder Smartphone Ihr Unternehmen weiterhin präsent.

Bei einem validen Service Worker und Manifest erhält der Android Nutzer den Hinweis, dass die Webseite installiert werden kann. Das Manifest erhält die Informationen, wie die App aussieht, sowie die Splash Screens aus Loge und der hinterlegten Farben erzeugt. Der iOS Nutzer kann die PWA ebenfalls installieren, jedoch wird der Hinweis zur Installation nicht angezeigt. Die Splash Screens wird hier im "head" der Website definiert. Der PWA Asset Generator hilft bei der Erstellung der Icons und Splash Screens.

Push Nachrichten

Das oft gehasste, aber auch viel geliebte Feature “Push Nachrichten” bieten einen Mehrwert bei einer App. Bei sinnvollem Einsatz kann die Conversion Rate deutlich gesteigert werden. Bei der PWA gibt es zwei Arten von Push Nachrichten, erstens wenn die App geöffnet ist (Foreground Message) und zweitens wenn die App geschlossen ist (Background Message). Bei der Aktualisierung der App können Push Nachrichten hilfreich sein, um den Benutzer über das Update zu informieren. Sollte man Push Nachrichten an größere Nutzergruppen verschicken wollen, eignet sich zum Beispiel Firebase Cloud Messaging perfekt dafür. Firebase ist bezüglich DSGVO bereits GPDR-ready.

Background Synchronisation

Um Daten mit dem Benutzer auf dem Endgerät synchronisieren zu können sind verschiedene Techniken einsetzbar. Eine der neueren Methoden ist die Background Synchronisation, welche leider nicht von allen Browsern unterstützt wird. Der Fallback der Background Synchronisation ist eine Statusprüfung des Browsers auf eine Netzwerkverbindung, so dass die Daten synchronisiert werden können. So findet im normalen Prozess die Datensynchronisation einer Progressiven Web App statt.

Bislang nicht genug Gründe für eine PWA

Auf PWA Stats findet man genügend Gründe, weshalb man auf eine PWA nicht verzichten sollte. Beispiele bekannter Firmen findet man unter PWA.BAR oder unter pwa.rocks . Große Unternehmen wie Debenhams, Forbes, Financial Times und Starbucks leben es bereits vor, kleinere Unternehmen entdecken gerade die Vorteile die eine PWA mit sich bringt.

PWA ist (bis jetzt nicht) die eierlegende Wollmilchsau

Leider werden noch nicht alle Features von allen Endgeräten supportet. Erst neuere Browser unterstützen den Service Worker, welcher für eine PWA benötigt wird. Apple hinkt noch etwas mit der Implementierung spezieller Features hinterher, hat aber mit den letzten iOS Updates nachgezogen. Push Notifications werden von Apple ~~noch nicht~~ mit der verfügbaren Standard API unterstützt. Auch die Installation der PWA ist momentan bei den Apple Geräten unter iOS nur durch manuelles hinzufügen "Add to Homescreen" möglich. Einen Hinweis zu Installation wird bei iOS im Gegensatz zu Android nicht angezeigt.

Kosten der App

Egal ob PWA, Hyprid oder Nativ, kostet es grundsätzlich Geld diese Apps vernünftig umzusetzen. Jedoch kann je nach Umfang und Features eine Progressive Web App günstiger ausfallen.

Mittlerweile setzen Unternehmen Apps auf beiden Systemen ein, um von den Vorteilen einer Progressiven Web App zu profitieren und zugleich eine native App auf dem Markt zu haben. Nicht jeder User ist bereit eine App zu installieren. Progressive Web App müssen nicht installiert werden, um von den Vorteilen wie Offline Verfügbarkeit und Webseitengeschwindigkeit zu profitieren. Mittlerweile herrscht eine Art Trägheit bei der Installation von Apps, welche einerseits dem Datenschutz und andererseits der Vielzahl an Apps zu verschulden ist.

Gretchenfrage -
Native App oder PWA?

Die Abwägung erfolgt nach dem Ziel, welches zu erreichen ist und wie es umgesetzt werden soll. Von einer Progressive Web App kann jede Webseite profitieren, deshalb ist es nicht ausgeschlossen, dass man eine native App und zugleich einen PWA zur Verfügung stellt. So nutzt man alle Vorteile. Google Maps gibt es z.B. als Native App sowie als PWA, wobei auf den ersten Blick kein Unterschied feststellbar ist.

Der Weg zur eigenen Progressiven Web App

Sie denken über die Realisierung einer Progressiven Web App nach? Möchten von den Vorteilen wie Geschwindigkeit, Offlinefähigkeit und / oder von den Push Nachrichten profitieren, sowie die Verweildauer auf der Webseite steigern?

Die Gründe für eine PWA können unterschiedlich sein. Ein Kunde möchte seine News über Push Nachrichten verbreiten, der andere sieht die Vorteile in der Performance und Offlinefähigkeit. Da es im Grunde genommen keinen Nachteil gibt, spricht nichts gegen eine Umsetzung einer Progressiven Web App. Der Umfang kann nach Kundenanforderungen und Budget individuell ausgerichtet werden.

Mit Joomla- und WordPress-PWA-Erweiterungen Websites in nativ-ähnliche Apps umsetzen

Neben der Entwicklung von Progressive Web Apps (PWAs) habe ich mein Fachwissen um die Entwicklung von Erweiterungen für beliebte CMS-Plattformen, Joomla und WordPress, erweitert. Diese Erweiterungen sind so konzipiert, dass sie Websites in nativ-ähnliche Anwendungen für jede Plattform umwandeln. Die Joomla PWA und WordPress PWA verwandelt. ermöglichen es den Nutzern, die App direkt von der Website aus zu installieren, sie mit der Funktion "Protocol Handler" zu starten und eine Reihe weiterer fortschrittlicher Funktionen zu nutzen, die User Experience zu verbessern.

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.