Person am Laptop

Mit PWAs in die Zukunft?

24. Feb. 2022

Progressive Web-Apps (PWA) – ein neuartiges App-Format, das sich noch in der Entwicklung befindet und versucht, den Weg in die digitale Welt zu finden. Eine Progressive Web-Applikation zeichnet sich dadurch aus, dass sie Eigenschaften von Webseiten mit Merkmalen von nativen Applikationen verknüpft und dadurch sowohl im Web als auch auf mobilen Endgeräten genutzt werden kann.

Doch warum Progressive Web-Apps, wenn es bereits klassische App-Varianten gibt, wie beispielsweise native Apps oder hybride Apps? Was genau ist so „Progressive“ an einer PWA und worin liegen die Vor- sowie Nachteile zu klassischen Web-Applikationen?

Wir geben einen Überblick und zeigen Ihnen all dies an einem unserer aktuellen Projekte, einer Progressive Web-App als Kassenbuch, das als Feature bei den Warenwirtschafts- sowie ERP-Systemen des Anbieters APRO.CON Software GmbH & Co. KG eingesetzt wird.

APRO.CON – Warenwirtschaft mit System

Logo APRO.CON

Als ganzheitliches sowie modulares Warenwirtschaftssystem ist die Funktionsweise von APRO.CON im Detail auf die Anforderungen mittelständischer Lebensmittelbetriebe wie zum Beispiel Fleischereien, Käsereien, Hofläden, Confiserien, Bäckereien und Obst- sowie Gemüsehändler zugeschnitten.

Durch flexible Auswertungs- und Steuerungswerkzeuge können Betriebsabläufe transparent sowie sicher gestaltet werden – und mit dem von uns entwickelten mobilen Kassenbuch nun noch viel mehr.

Bild digitales Kassenbuch

Ein digitales Kassenbuch als Progressive Web-App

Die neue Software-Lösung für APRO.CON wurde als Progressive Web-Applikation entwickelt und soll allen Kunden fortan kurzfristig einen Echtzeit-Überblick über betriebsrelevante Kennzahlen ermöglichen. Das digitale Kassenbuch dient als zusätzliche und einfach zugreifbare Oberfläche an das Warenwirtschaftssystem, das in der Regel auf einem lokalen Server läuft.

Über die Web- oder aber App-Oberfläche können Ein- und Ausgaben mit nur einem Klick eingebucht werden – selbst das Fotografieren und der Upload von Belegen ist möglich.

Zudem kann ein vollautomatisierter Kassensturz oder Tagesabschluss durchgeführt werden, mit der weiterführenden Möglichkeit, sich die generierten Berichte im Nachgang anschauen zu können.

"Die Geräte übertragen beim Tagesabschluss sämtliche Daten automatisiert an die App. Der zuständige Mitarbeiter muss also nicht alles händisch in sein Smartphone oder Tablet tippen, sondern überprüft lediglich die automatisch erstellten Listen. Es gibt nur ganz wenige Anbieter am Markt, die dieses Komfortfunktion bieten."

(Jens Eden, Geschäftsführer APRO.CON Software GmbH & Co. KG).

Im Vergleich zu einer normalen Web-App zeichnet sich die PWA zudem mit folgenden Features aus:

  • Direkter Zugriff auf die Systemkamera zum Fotografieren von Belegen
  • Scannen eines QR-Codes anstatt Andresseingabe für die Verbindung zum ERP-Server
  • Anlegen einer Web-Verknüpfung analog zu nativen Apps
  • Parallele Verwaltung mehrerer Filialen und Kassenbücher
  • Offline-Funktionalität durch Local Storage des Browsers

Durch die intelligente Nutzerverwaltung, die an das Warenwirtschaftssystem von APRO.CON geknüpft ist, können auch im Kassensystem verschiedene Rollen mit unterschiedlichen Berechtigungen sowie mehrere Nutzer-Logins eingerichtet werden.

Als Progressive Web-Applikation wurde das Kassensystem im Frontend mit vue.js und vuetify entwickelt, wobei die Vue-App in unserem Kubernetes-Cluster in einem Docker-Container liegt und über eine REST-Schnittstelle an das Backend von APRO.CON angebunden ist.

Beide Technologien zeichnen sich dadurch aus, dass sie leicht verständlich, individuell integrierbar, in der Entwicklung flexibel und zudem durch eine geringe Größe sehr kompakt sind. Vuetify ist hierbei ein Framework von vue.js, mit dem einfach und schnell Web-Anwendungen gemäß des Material Designs von Google erstellt werden können. Das Besondere daran ist, dass ohne fundierte Kenntnisse im Bereich UI & UX ansprechende Elemente sowie Anwendungen erstellt werden können.

Da das Backend des Warenwirtschaftssystems in der Regel lokal in der Filiale betrieben wird, bleibt die Datenspeicherung sowie -verarbeitung direkt beim Kunden. Die Kassenbuch-App liest angefragte Daten lediglich über SSL verschlüsselte Kommunikationskanäle aus bzw. sendet die von den Nutzern eingetragenen Daten über einen verschlüsselten Kanal an das Backend.

Kassensystem auf Smartphone

Progressive Web-Apps vs. klassische Web-Applikationen

Die Umsetzung einer Softwarelösung als Progressive Web-Applikation hat sowohl Vor- als auch Nachteile, die vor der Entwicklung sorgfältig analysiert werden sollten.

Im Folgenden präsentieren wir die wichtigsten Besonderheiten einer PWA und zeigen Ihnen, ob Progressive Web-Apps eine Alternative zu klassischen Web-Apps darstellen können.

Online- und Offline-Zugriff sowie automatische Updates

Kassensystem auf Tablet

Durch die Verknüpfung von Eigenschaften einer Webseite mit Merkmalen von nativen Applikationen können Progressive Web-Anwendungen auch offline ausgeführt werden. Der ähnliche Look & Feel zu nativen Applikationen ist hier insbesondere hervorzuheben.

Trotz der Möglichkeit des Offline-Zugriffs ist es zu empfehlen eine Progressive Web-App online und mit einer stabilen Internetverbindung auszuführen. Dies bietet den Vorteil, dass Nutzer stets auf die aktuellste Version zugreifen können – ein Vorteil von PWAs, denn...

Ein Nutzer muss sich im Vergleich zu anderen Apps nicht um mögliche Updates kümmern. Dies und noch mehr geschieht dank der Serveranbindung bei progressiven Web-Apps vollkommen automatisch.

Smart, Flexibel und Hochleistungsstark

Des Progressive Web-Apps bestechen im Vergleich zu nativen Applikationen durch einen geringeren Arbeitsaufwand und reduzierte Kosten, da nicht für mehrere verschiedene Betriebssysteme entwickelt werden muss. Ebenso wie native Apps, funktionieren PWAs auch in älteren Browsern und schränken den Nutzer nur bedingt ein, sodass je nach Browser-Kompatibilität zum Beispiel nur auf die Grundfunktionen der Applikation zugegriffen werden kann.

Progressive Web-Apps besitzen aktuell jedoch noch nicht alle Möglichkeiten von klassischen Apps und können so nur bedingt auf Endgeräte und verschiedene Systemressourcen zugreifen. Einbußen in der fehlenden Nutzung von bestimmten Features oder auch Inhalten sind die Folge. Beispielsweise ist eine Positionierung einer PWA im App-Store von Apple aktuell nicht möglich – von Suchmaschinen im Web können Progressive Web-Apps aber durchaus gefunden werden. Auch Notifications oder Push-Benachrichtigungen sind unkompliziert und problemlos möglich.

Insbesondere in der heutigen Zeit, in der die mobile Generation großen Wert auf Geschwindigkeit und Effizienz bei der Nutzung von App- oder auch Web-Anwendungen legt, kann eine PWA punkten, denn: Durch die Nutzung sowohl im Web als auch als App benötigen diese in der Regel wenig Speicherplatz und agieren hochleistungsstark sowie mit deutlich verkürzten Ladezeiten. Diese Funktionsfähigkeit ist unter anderem auch darauf zurückzuführen, dass PWAs in der mobilen Anwendung nicht installiert werden müssen und somit auch keinem Freigabeprozess oder der Kontrolle von Apple sowie Google unterliegen.

Ein weiterer Vorteil von Progressive Web-Apps ist, dass sie im Vergleich zu herkömmlichen Applikationen eine große Flexibilität mit sich bringen, da sich ihr eigener Funktionsumfang stets an den Nutzungsrahmen des Users anpasst und sie somit progressiv sind. Dies bedeutet, dass Nutzer, deren Endgeräte oder Browser zwar nicht mit allen Features der Anwendung kompatibel sind, sie diese dennoch in reduzierter Form nutzen können.


Ein Überblick: PWA versus Native App und Web-App

Folgende Übersicht gibt einen Überblick über die Unterschiede zwischen einer Progressive-Web-App und klassischen App-Formaten:

Zukunftspotential Anwendung von Progressive-Web-Apps?

Zusammenfassend lässt sich sagen, dass eine PWA je nach Anwendungsfall durchaus eine Alternative zu nativen oder hybriden Apps darstellen kann – vor allem dann, wenn eine Anwendung schnell und kostengünstig umgesetzt sowie offline nutzbar und mobil optimiert genutzt werden soll. Und auf lange Sicht? Für dieses Jahr ist trotz der Vorteile einer PWA keine flächendeckende Verwendung zu erwarten – zu groß sind die noch fehlenden Kompatibilitäten mit unterschiedlichen Browsern und insbesondere mit dem Betriebssystem iOS sowie dem Safari-Browser von Apple.

Positive Anzeichen lassen aber hoffen, dass Progressive-Web-Apps mit der Weiterentwicklung performanter Web-Technologien und einer echten Plattformunabhängigkeit durchaus zu klassischen Web-Apps anschließen können. So arbeitet Microsoft zurzeit an der Integration von Service Workern im Edge-Browser und auch andere Anbieter, wie beispielsweise Mozilla und Opera beschäftigen sich zunehmend immer aktiver mit Progressive Web-Apps. Gleiches gilt für Google, die bereits seit letztem Jahr mit der kostenlosen Technologie „Web App Manifest“ experimentieren, einem Framework, das es erlauben soll mittels weniger Codezeilen eine Webseite in eine App umzuwandeln. Auch wenn sich diese Technologie noch in der Entwicklung befindet, könnte sie bei Erfolg den PWAs zu einer wachsenden Popularität verhelfen und Webseitenbetreibern sowie IT-Unternehmen eine immense Hilfestellung für die Entwicklung von Progressive Web-Apps geben.

Die Zukunft wird also zeigen, ob Progressive Web-Applikationen auch langfristig mit nativen Apps konkurrieren können und inwieweit die namenhaften, weltweit agierenden Unternehmen hierfür Chancen einräumen. Es bleibt spannend und wir bleiben dran!

Julia Schloen

Unsere PWA-Expertin

ist für Sie da!

Julia Schloen
Haben Sie Fragen?

Weitere Blogartikel

28. Sep. 2022

Agile Softwareentwicklung

Blog

Für den erfolgreichen Abschluss eines Projekts ist eine effiziente und effektive Zusammenarbeit im Entwicklungsteam unverzichtbar. Gerade mit wachsenden Anforderungen und Aufgaben gewinnt auch eine strukturierte Zusammenarbeit immer mehr an Bedeutung. Jeder kennt die Herausforderungen aus eigener Erfahrung: In einem Team müssen Aufgaben verteilt, Abläufe koordiniert und Zeitpläne untereinander abgestimmt werden. mehr

25. Jul. 2022

Entwicklung eines Generators zur Erstellung von Softwarearchitekturen

Blog

Bei der Entwicklung von Software treten bei fortlaufender Dauer, entsprechender Größe, Komplexität und bei häufig auftretenden Änderungen Herausforderungen hinsichtlich der Architektur des zu entwickelnden Softwaresystems auf. Diese bestehen zumeist darin, den immer größer werdenden Quellcode und die zunehmende Anzahl von Softwarekomponenten passend zu organisieren. Die Architektur des Softwaresystems ist dabei maßgeblich für die Wartung und Anpassungsfähigkeit der Software als auch für die Einarbeitungszeit neuer Entwickler. Für die Entwicklung einer besseren Softwarearchitektur existiert der Ansatz der modellgetriebenen Softwareentwicklung. Bei diesem Ansatz werden sogenannte domänenspezifische Sprachen (DSL) eingesetzt, um eine abstrakte Beschreibung einer bestimmten Domäne zu erreichen. Aus dieser Beschreibung kann dann mit einem passenden Generator, der die domänenspezifische Sprache transformiert, ein lauffähiger Quellcode generiert werden. Dadurch wird mit einer passenden DSL und einem Code-Generator eine Softwarearchitektur erstellt, die die Wartung und Anpassungsfähigkeit des zu entwickeltem Softwaresystem verbessert. mehr

01. Mai. 2022

Benutzerdokumentation automatisiert generieren

Blog

Die agile Softwareentwicklung hat sich in den letzten Jahren zu einem wichtigen Ansatz der technischen Umsetzbarkeit entfaltet. Neben den Vorteilen, wie z. B. Flexibilität, Fehlererkennung und erhöhte Performanz durch eine stetige Kommunikation, bringt eine agile Softwareentwicklung jedoch auch Einschränkungen mit sich. So wird die Dokumentation - zu welcher auch die Benutzerdokumentation zählt - eher relativiert betrachtet und zugunsten der engen Zusammenarbeit zwischen Entwickler:innen, Tester:innen, Kund:innen und Nutzer:innen auf ein Minimum beschränkt. Bedingt durch Covid-19 musste der persönliche Kontakt mit Kunden, welcher in einer agilen Entwicklungsumgebung einen hohen Stellenwert besitzt, auf ein Minimum reduziert werden. Dabei gewann Software allgemein in den letzten Jahren immer mehr an Komplexität, welches auch eine zunehmende Rolle in der Organisation von Informationen innerhalb der Benutzerdokumentation zur Folge hat. mehr

28. Apr. 2022

Empathy Maps als UX-Tool

Headerbild Empathy Maps
Blog

In Entwicklungs-, Design- oder Marketing-Teams bestehen oftmals unterschiedliche Vorstellungen von Zielgruppen, bzw. dem Endnutzer einer Applikation. Dies kann dann problematisch werden, wenn bspw. neue Features geplant oder versucht wird, den Endnutzer in Texten sowie Bildern direkt anzusprechen. Vor allem aber führt dies oftmals zu langwierigen Prozessen sowie Entscheidungen über die Nutzer und deren Bedürfnisse. Um dieser Herausforderung entgegenzuwirken, lassen sich unterschiedliche Ansätze sowie Methoden nutzen. Eine besonders effiziente und in der Umsetzung einfache Methode ist die „Empathy Map“. Empathy Maps sind ein agiles Tool im Bereich des User Experience Designs, das dabei hilft, die Nutzer sowie deren Bedürfnisse besser zu verstehen und ein einheitliches Mindset im Projekt-Team zu etablieren. Die Nielsen Norman Group, eine Erfolgreiche UX Beratungsfirma aus Amerika, welche von den User Experience Pionieren, Don Norman und Jakob Nielsen gegründet wurde, definiert Empathy Maps wie folgt: mehr