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. 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

15. Apr. 2022

Flexibel einsetzbare Markupsprache

Blog

Die Idee, dass Daten wertvoll sind und das strukturierte Speichern dieser sinnvoll ist, wurde schon in den 60er Jahren im Konzept des Generic Coding erkannt. Diese Versuche, eine vereinheitlichte Sprache zur Beschreibung von Daten zu entwickeln, mündeten 1986 in die Entstehung der Standard Generalized Markup Language (SGML), welche sich durch die Verwendung von sogenannten Tags auszeichnet. Die Ähnlichkeit zu modernen Markup-Sprachen wie HTML oder XML ist kein Zufall, da diese SGML-konform entstanden sind, sich aber mittlerweile davon gelöst haben, um ihre Struktur weniger eingeschränkt anpassen zu können. mehr

17. Mär. 2022

Wohin mit all den Daten?

Blog

Kennen Sie es auch? Sie wollen in Ihrem Unternehmen auf bestimmte Daten zugreifen, können diese aber auf die Schnelle nicht finden – einige liegen auf den Rechnern der Mitarbeitenden, andere auf Datenbanken oder in der Cloud und wieder andere innerhalb von Softwaresystemen. Sie fragen sich, ob es nicht eine Möglichkeit gibt, all’ diese Daten ohne einen großen Aufwand zu sammeln und von einem Ort aus nutzen zu können? Die Antwort ist: Ja! Die Digitalisierung von Unternehmen ist in vollem Gange: Prozesse werden optimiert und automatisiert, Kommunikation wird dynamischer und die generelle Effizienz von Unternehmen steigert sich. Die mit der digitalen Transformation einhergehenden, gewaltigen Datenmengen – Stichwort Big Data – können genutzt werden, um Datenanalysen durchzuführen, die hochwertige Erkenntnisse für das eigene Unternehmen generieren können. Aber wo soll man nun beginnen? Daten innerhalb des eigenen Unternehmens sind oftmals weitläufig verteilt, nicht zwangsläufig strukturiert und haben unterschiedliche Dateiformate. Die Nutzung einer geeigneten Infrastruktur, die die Daten automatisiert extrahiert und speichert, stellt die Basis für eine organisierte Datenhaltung dar, die anschließende Auswertungen und Analysen ermöglicht. mehr

21. Okt. 2021

Das Potenzial der Datenanalyse für Unternehmen

Blog

Sich nach einem langen Tag auf die Couch zu setzen ist doch ’was Schönes: Kaum ist das Smartphone aus der Tasche gezogen, wird schnell ein schönes Urlaubsfoto auf Instagram gepostet, neueste Vorkommnisse getwittert oder man verabredet sich innerhalb weniger Sekunden über WhatsApp mit dem besten Freund auf ein Feierabendbier. Die Geschwindigkeit und Menge, mit der Daten heutzutage erzeugt und gesendet werden können, hat in den letzten Jahren spürbar zugenommen und wird sich zukünftig noch erheblich steigern. Spätestens seit dem Datenskandal um Facebook und Cambridge Analytica wissen wir alle, dass Unternehmen Daten nutzen können, um Profite zu generieren. Doch längst nicht immer muss es sich um personenbezogene Daten handeln. Es gibt eine Vielzahl weiterer Daten in jedem Unternehmen, die in der Auswertung wertvolle Erkenntnisse liefern können. Doch wieso lohnt es sich überhaupt für Unternehmen eigene Daten zu analysieren und wie sieht der perfekte Prozess einer Datenanalyse aus? mehr