Im fünften Teil meiner Blogreihe „Technologien mobiler Anwendungen" geht es um die Progressive Web Apps. Falls Sie den vorherigen Artikel zu den Cross Compile Frameworks nicht gelesen haben, kann ich Ihnen nur empfehlen dies zu tun, bevor Sie diesen Artikel weiterlesen. In diesem Artikel wird auf die Vor-und Nachteile von PWAs und auch die Risiken und Abhängigkeiten bei der Entwicklung eingegangen. Zudem wird auch das Know-How am Markt zusammen mit den möglichen Technologien aufgegriffen. Bevor es dann am Ende des Artikels um die Beispiel App geht, wird noch einmal auf den Entwicklungsaufwand und die Entwicklungskosten geschaut.
Die Blogreihe „Technologien mobiler Anwendungen"
Hier finden Sie die Auflistung der einzelnen Blogartikel, die zur Blogreihe gehören. Diese Agenda wird mit jedem neu veröffentlichten Artikel erweitert.
Progressive Web Apps
Überblick: Progressive Web Apps
Eine Progressive Web App (PWA) ist eine klassische Web App (auch Webanwendung genannt), die mit Hilfe von sogenannten „Service Workern" wie eine native App auf das Endgerät des Nutzers heruntergeladen werden kann. Eine PWA wird nach dem Download wie eine normale App auf dem Homescreen des mobilen Geräts angezeigt.
Der Unterschied zu anderen Apps ist allerdings, dass die PWA eigentlich über den Browser läuft. Sie ist also wie ein Browserfenster, das außerhalb des Browsers existiert. Service Worker sind Skripte (geschrieben in JavaScript), die dafür sorgen, dass die App auch offline funktionsfähig ist. Dabei werden Daten, wie z.B. die Nutzer Oberfläche im Cache des Browsers gespeichert, über den die PWA installiert wurde. Eine PWA funktioniert nicht nur auf mobilen Geräten, sondern auch auf einem Computer. Man entwickelt also eine Web Anwendung, die anschließend auf allen Geräten heruntergeladen werden kann.
Da eine PWA direkt von der Webseite, auf der die eigentliche Web Anwendung läuft, heruntergeladen wird, haben PWAs als einzige der hier vorgestellten Technologien nicht den Zwang, über einen App Store installiert werden zu müssen. Allerdings gibt es natürlich die Möglichkeit, die App genauso wie native und hybride Apps auf Google Play und im App Store von Apple zur Verfügung zu stellen.
Die Vorteile von PWAs
Der größte Vorteil einer PWA ist, dass man nur eine Codebasis für alle Plattformen entwickelt. Die App muss weder für jede Plattform neu kompiliert werden, noch muss der Code durch native Plugins ergänzt werden. Ein weiterer Vorteil besteht darin, dass die Nutzer die App nicht selber updaten müssen. Die PWA verweist immer auf die URL, unter der die Web App liegt, was dazu führt, dass wenn die Web App neue Features hat, diese von den Service Workern neu gecached werden und somit automatisch für den Nutzer verfügbar sind. Durch das Caching von Daten im Browser ist die App auch offline verfügbar, auch verkürzen sich dadurch Ladezeiten.
Da eine PWA eine Web-App ist, können die Inhalte von Suchmaschinen erfasst werden und demnach auch über diese über Suchmaschinen gefunden werden.
Risiken und Abhängigkeiten von PWAs
Einen kleiner Nachteil, den PWAs haben, ist ein anderes „Look & Feel" als bei nativen Apps, da PWAs aus Webkomponenten bestehen. Allerdings ist ein Vorteil hinsichtlich des Look & Feel, dass die App auf allen Plattformen gleich aussieht. Das führt dazu, dass Nutzer sich unabhängig vom Betriebssystem gut zurechtfinden können. Der größte Nachteil einer PWA ist, dass die Nutzung der nativen Features, wie Sensoren, komplett vom Browser abhängt. Dadurch sind je nach Browser gewisse Features nur zum Teil nutzbar. Die gängigsten Browser (Google Chrome, Safari, Firefox) unterstützen jedoch mittlerweile den größten Teil der Funktionen.
Technologien und Markt Know-how
Zur Entwicklung einer PWA werden Webtechnologien verwendet. Dazu gehören neben dem klassischem HTML/CSS/JavaScript-Ansatz auch moderne Frameworks wie React.js, Angular oder Vue.js. Das Herzstück einer PWA ist der Service Worker, welcher in JavaScript geschrieben wird. Frameworks wie React.js liefern in der Regel fertige Service Worker, die man als Entwickler nur noch aktivieren muss. Dadurch ist das Entwickeln einer PWA für Webentwickler sehr einfach.
Um aus einer Web App eine PWA zu bauen, kann auch das Tool PWABuilder sehr hilfreich sein. PWABuilder erlaubt es eine URL auf verschiedene Kriterien zu bewerten, um so besser zu erkennen, was an der Web App noch getan werden muss, um eine PWA zu erstellen. Außerdem bietet das Tool genauso wie Bubblewrap die Möglichkeit, die PWA als Android App zu verpacken.
Entwicklungsaufwand und -kosten
Der Entwicklungsaufwand ist vergleichbar mit der Entwicklung von Cross Compile Frameworks. Es wird nur eine Codebasis für alle Plattformen verwendet, wodurch wie bei anderen Technologien auch nur ein Development Team benötigt wird. Für die Entwicklung wird nur Web-Developer benötigt und keine nativen Developer mehr. Auch beim durchschnittlichen Gehalt eines Web-Developers erkennt man deutliche Unterschiede zu den anderen Technologien. Mit ca. 55.000€ pro Jahr liegt das Gehalt deutlich unter den anderen. Insgesamt ist eine PWA günstiger in der Entwicklung als die Entwicklung mit einer der anderen Technologien.
Meine PWA Beispiel-App
Für die Beispiel-App wurde das Web-Framework React gewählt. Das initiale Projekt Setup wurde wie auch die anderen Projekte mit IntelliJ erzeugt, welches das Create-React-App Tool verwendet. Dadurch wird ein Boilerplate Code für eine React App erzeugt, mit der man dann sofort mit der Entwicklung loslegen kann. Für die UI Komponenten wurde die Third-Party-Library Material UI verwendet, welche die Standard UI Komponenten zur Verfügung stellt. Diese Library folgt dem Material Design System, welches von Google kreiert wurde und auch von Flutter zur Entwicklung von Android Anwendungen verwendet wird.
Ein größeres Problem war das State Handling der React Applikation, um den Timer runter laufen zu lassen. Dieses Problem wurde allerdings mit Hilfe eines Custom Hooks gelöst. Somit wurden alle Anforderungen erfüllt.
| Anforderung | Erfüllt | Anmerkung |
|---|---|---|
| Uhr | ++ | |
| Runde Progressbar | ++ | |
| Picker für die Zeit | ++ | |
| Play-Button | ++ | |
| Reset-Button | ++ | |
| Vibration | ++ | |
| Wecker-Ton | -- |
Wenn Sie die nächsten Artikel der Blogreihe „Technologien mobiler Anwendungen" nicht verpassen wollen, dann folgen Sie newcubator auf den Social Media Kanälen und schauen Sie regelmäßig auf unserer Blogseite vorbei. Im nächsten Artikel schauen wir uns an, was man unter einer Hybrid Apps versteht.
Sie haben eine Produktidee für eine App und sind sich unsicher, welche Technologie für Sie die Beste ist? Dann kontaktieren Sie uns gerne für ein unverbindliches Erstgespräch.
