Im vierten 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.
Blogreihe
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
Progressive Web Apps
Eine Progressive Web App (PWA) ist eine klassische Web App, die mit Hilfe von Service Workern auf das Endgerät des Nutzers heruntergeladen werden kann. Eine PWA wird nach dem Download wie eine normale App auf dem Homescreen des Geräts angezeigt.
Der Unterschied zu anderen Apps ist allerdings, dass die PWA weiterhin über den Browser läuft. Sie ist also wie ein Browserfenster, das außerhalb des Browsers existiert. Service Worker sind JavaScript Skripte, die dafür sorgen, dass die App offline funktioniert. 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, liegen PWAs als einzige der hier vorgestellten Technologien nicht in den App Stores. Allerdings gibt es die Möglichkeit mit dem Tool Bubblewrap eine PWA in eine Trusted Web Activity zu verwandeln, wodurch man sie in den Google Play Store laden kann. Die App, die dort liegt, ruft genau die PWA auf.
Vor- und Nachteile
Der größte Vorteil einer PWA ist, dass man nur eine Codebasis für alle Plattformen hat. 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 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, ohne, dass er die App manuell updaten muss. Durch das Caching von Daten im Browser ist die App auch offline verfügbar. Das führt unter anderem auch dazu, dass die Ladezeiten im Vergleich zur reinen Web App verkürzt werden.
Eine PWA ist in der Regel auch trotz Download kleiner als andere aus dem App Store geladene Apps. Weil die PWA eine Web App ist, ist diese auch über Suchmaschinen zu finden und auch die Inhalte können von Suchmaschinen erfasst werden. Dadurch dass die PWA nicht in den App Stores liegt, entsteht allerdings auch ein Nachteil, da Nutzer häufig in ihrem App Store nach neuen Apps suchen. Wenn diese dort nicht zu finden ist, wird sie von weniger Nutzern entdeckt. Eine Abhilfe schafft dabei z.B. das Tool Bubblewrap, mit dem PWAs so verpackt werden können, dass sie in einen Android App Store geladen werden können. E
inen weiteren Nachteil, den PWAs auch haben, ist ein anderes Look & Feel. Entwickler können zwar die nativen Komponenten nachbauen, allerdings werden diese sich dann eher wie eine Kopie anfühlen als wie eine native App. 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 von der Plattform 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 oder gar nicht nutzbar.
Risiken und Abhängigkeiten
Wie schon oben beschrieben, ist eine PWA komplett von dem Browser abhängig. Das hat zu Folge, dass eine PWA nur die Features nutzen kann, die der Browser nutzen kann. Dadurch fehlen einige native Sensoren, die andere Technologien nutzen können. Das könnte ein Risiko werden, wenn man eine Progressive Web App entwickelt, die später noch um weitere Features ergänzt werden soll. Allerdings ist es auch zu beachten, dass die häufig benutzen Browser wie Chrome, Firefox und Safari schon sehr viele Features unterstützen. Weitere Abhängigkeiten können entstehen, wenn man Frameworks zur Web App Entwicklung nutzt.
Technologien und Markt Know-how
Die Technologien zur Entwicklung einer PWA sind die, mit denen man Web Apps baut. Dazu gehören neben dem klassischem HTML, CSS, JavaScript Ansatz auch moderne Frameworks wie React.js von Facebook, Angular von Google oder Vue.js von Evan You. Das Herzstück einer PWA ist der Service Worker, welcher in JavaScript geschrieben wird. Mit einem Framework wie React.js kommt meistens schon ein fertiger Service Worker, den man als Entwickler nur noch aktivieren muss. Dadurch ist das Entwickeln einer PWA sehr einfach, wenn man sich bereits mit der Web Entwicklung auskennt.
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.
Die genannten Web Frameworks React, Angular und Vue sind alle Open-Source und besitzen ein GitHub Repository. React erzielt auf GitHub 154.000 Sterne, Angular 65.000 Sterne und Vue 170.000 Sterne. Diese Zahl zeigen, dass Web Frameworks sehr beliebt sind und viele interessiert an ihnen sind. Auch bei den Joblistings zeigt sich, dass bei Indeed mit ca. 1650 Suchergebnissen Web Developer sehr gefragt sind.
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. $60k 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.
Beispiel-App
Für die Beispiel-App wurde das Web-Framework React gewählt. Hier gab es von Seiten des Studenten bereits Vorkenntnisse. 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. Bis auf den Wecker-Ton wurden alle Anforderungen erfüllt. Für das Abspielen des Wecker-Tons ließ sich innerhalb der Entwicklungszeit keine Lösung finden. Ausgeschlossen werden kann die Möglichkeit dadurch aber nicht.
Hier nochmal der Erfüllungsgrad der einzelnen Features in einer Tabelle.
++: Feature ist vollständig umgesetzt
+-: Feature ist nur teilweise umgesetzt
--: Feature ist gar nicht umgesetzt
| 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.
