Ermitteln Sie in 2 Minuten Ihr persönliches Angebot und erhalten Sie 10% Rabatt

Nutzen Sie den Videobakers Preiskalkulator, um Ihr Angebot direkt online zu erhalten.

Jetzt starten

Progressive Web Applikationen (PWA) revolutionieren Apps

Die Diskussionen starten schon vor der ersten Codezeile. Soll eine Native App oder eine Webapp entwickelt werden? PWA soll die Entscheidung erleichtern.

blog thumbnail
circle decorationperson
decoration modernperson modern

Native Apps sind verlockend, denn Sie bieten vollen Zugriff auf Systemressourcen wie NFC, Bluetooth, WLAN etc. Ein riesiger Vorteil ist auch die Offline-Fähigkeit. Gerade das "supergut ausgebaute" Deutsch Mobilfunknetz stellt Nutzer einer Website auf eine Geduldsprobe.

Systemressourcen und Offline-Fähigkeit klingen verführerisch oder? Dann lies weiter, denn es gibt nichts umsonst. Diese Regel gilt auch in der Welt der Softwareentwicklung.

Denn obwohl der Smartphonemarkt von mittlerweile nur noch zwei Betriebssystemen dominiert wird, ist das Entwickeln von nativen Apps wesentlich zeitaufwendiger als das Entwickeln einer Website. Die Probleme fangen bei der Wahl des Frameworks an. Nehme ich React Native oder doch IONIC? Und was ist eigentlich dieses Flutter?

Weiter geht es mit der Entwicklungsumgebung. Du möchtest deine App für IOS entwickeln? Dann brauchst du zwingen eine OSX-Entwicklungsumgebung. Continous Integration und Zertifikathandling sind ein paar weitere Schlagwörter, die uns Softwareentwicklern das Leben mit nativen Apps erschweren.

Mobile First – Progressive Web App zur Rettung.

Eine lange herbeigesehnt Alternative zu den nativen Apps sind Website die sich ähnlich verhalten wie native Apps. Dem Nutzer soll kaum auffallen, dass es sich gerade um eine Website handelt. Vielmehr soll die Website wirken wie eine richtige App. Progressive Webapplikation versuchen genau hier anzusetzen und versprechen Lösungen für einige der Probleme.

Vorteile für den Betreiber

Einfach Entwicklung durch bekannte Programmiersprachen

Javascript, HTML, CSS - Thats It. Mehr brauchst du nicht um eine funktionierend PWA zu erstellen. Doch Hand aufs Herz, in Zeiten von Typescript, Less, Webpack und Co. entwickelt kaum jemand in purem Javascript und co.

Shoutouts gehen hier an Preact, die es extrem einfach machen eine Progressive Web Application zu entwickeln. Es würde den Rahmen dieses Beitrags sprengen hier ins Detail zu gehen. [Hier][https://preactjs.com/] findest du aber mehr Informationen zu Preact.

preact logo Quelle: React Beitrag

Continuous Integration (CI) Pipeline - Easy

Im Vergleich zu der Entwicklung einer nativen App ist das Aufsetzen einer Continuous Integration Pipeline für eine Website ein Kinderspiel. Egal ob Bitbucket, GitLab oder Codrops. Eine ausführliche Erklärung, wie du eine Continuous Integration Pipeline aufsetzt, würde den Rahmen sprengen, deshalb ist auch hier ein Link zu einem guten Beitrag zum Aufsetzen einer CI Pipeline

ci logos Vergleich verschiedener CI Provider

Schnelle Iterationszyklen

Schnelle Iterationszyklen sind ein Segen für Nutzer und Betreiber. Fehler müssen schnell gefixt werden, neue Features sollen möglichst schnell ausgeliefert und getestet werden. Mit einer guten PWA und einer guten CI-Pipeline steht dem nichts im Wege.

Build Once run everywhere

Die PWA bietet einen weiteren Vorteil. Denn nicht nur mobile Endgeräte profitieren von den Features. Google Chrome, Firefox und Co implementieren den Standard wie ihre Pendants auf dem mobilen Endgerät.

Vorteile für den Nutzer

Offline Fähigkeit

Der wohl attraktivste Pluspunkt einer PWA ist die Offline-Fähigkeit. Du hast richtig gehört. Eine Website, die ohne Internet funktioniert. Einzige Bedienung: Du musst die Seite vorher einmal besucht haben.

Besuchst du beispielsweise abends eine Website und bist am nächsten Tag im Zug, ohne stabiles Internet, wirst du die Website ganz ohne Internetzugriff besuchen können. Vorausgesetzt natürlich der Softwareentwickler der Website hat die Software richtig entwickelt.

Für den offline Modus sind Service Worker verantwortlich. Service Worker prüfen, ob die eine Netzwerkverbindung besteht. Besteht eine Netzwerkverbindung, so lädt der Service Worker die Datei von dem Server herunter. Besteht allerdings keine Netzwerkverbindung prüft der Service Worker ob die angeforderte Ressource im Cache vorhanden ist und liefert diese aus.

service-worker Wie funktionieren Service Woker?

App Icon auf dem Homescreen

Ein großer Vorteil einer App, ist das Icon auf dem Homescreen. Denn der Nutzer sieht es unter Umständen jeden Tag und besucht deine App häufiger. Progressive Web Applikationen bieten auch hier die Möglichkeit ein App Icon auf dem Homescreen zu platzieren. Sobald der Nutzer die Website besucht, wird er gefragt, ob er die App ‚installieren‘ möchte. Schlicht und ergreifend wird einfach eine Verlinkung auf den Homescreen gepackt.

Push Notifications

PWA ermöglichen es dem Nutzer einfach Push notification anzuzeigen. Hier ist aus User Experience allerdings Vorsicht geboten, den nicht immer werden Notifications dankend angenommen

Nachteile

Das kling alles sehr gut, doch leider haben wir den Heiligen Gral der App Entwicklung noch nicht gefunden. Zumindest noch nicht.

Obwohl PWAs wohl eine Vielzahl von nativen Apps ablösen wird, gibt es einige Anwendungsfälle, bei denen eine native App unabdingbar ist.

Zugriff auf Systemressourcen

Du brauchst Zugriff auf Betriebssystem-Schnittstellen, wie zum Beispiel NFC? Aktuell führt leider kein Weg an einer nativen App vorbei. Doch auch hier ist Rettung auf dem Weg. In naher Zukunft wird es wohl möglich sein auf einige der Systemressourcen (Bluetooth, NFC etc.) aus einer Website zuzugreifen. Mehr Informationen dazu findest du hier: WhatWebCanDo

App store

Du möchtest deine App im App Store sehen? Auch hier führt dann kein Weg an einer nativen App vorbei. Schade.

Fazit

Letztendlich ist zu sagen, dass sowohl native Apps als auch für PWA derzeit eine Daseinsberechtigung haben. Die Vor- und Nachteile der Technologien sollten vorsichtige abgewogen werden. Progressive Webapplikationen ebnen den Weg zu einer vereinheitlichen Softwarenwicklung.

Simon Ludwigprofil bild
Simon Ludwig

Einige unserer Projekte

placeholder videobakers banner
placeholder video poster

rating source company icon

Tolle Erreichbarkeit, schneller und unkomplizierter Service, hochwertige Umsetzung der Kundenwünsche- absolut empfehlenswert.

Sven Weichel

play video iconplay video icon
placeholder videobakers banner
placeholder video poster

rating source company icon

Professionelle Beratung am Telefon, quasi immer erreichbar und unser Video war schnell fertig! Sehr zu empfehlen!

Marcel Springer

play video iconplay video icon
placeholder videobakers banner
placeholder video poster

rating source company icon

Wir haben uns für Videobakers entschieden, weil wir ein einzigartiges Video für unsere Website wollten, um hervorzustechen und zu überzeugen. Und genau das haben wir bekommen! Wir sind absolut zufrieden, nicht nur wegen des tollen Videos, sondern auch wegen der extrem netten Zusammenarbeit. 100% Empfehlung!

Farid Allam

play video iconplay video icon

Ihr Ansprechpartner

Mein Team und ich stehen Ihnen gerne jederzeit für alle Fragen rund um Ihr Erklärfilm-Projekt zur Verfügung. Rufen Sie uns einfach spontan an oder schreiben Sie uns eine Mail!
Call to action avatar from simonSimon Ludwig

Unser Videoexperte für Ihre Fragen

Jetzt Kontaktieren