Progressive Web Apps (PWA) haben so einige Vorteile: Sie sind im Browser aufrufbar, damit plattformunabhängig nutzbar und auch über Suchmaschinen zu finden. Außerdem sind sie mit etlichen Features ausgestattet, die sonst nur nativen Apps vorbehalten sind. Und sie können sich die Hardware mobiler Endgeräte zunutze machen – Bluetooth, NFC, Authentifizierung und Vibration sind nur ein paar Beispiele dafür.
Nachdem wir in einem anderen Blogbeitrag bereits geklärt haben, was eine PWA ist, soll es heute nach einer kurzen Zusammenfassung darum gehen, wie du eine Progressive Web App erstellen kannst.
Die wichtigsten funktionalen Komponenten einer PWA sind Service Worker, Web App Manifest und Application Shell. Der Service Worker ist eine JavaScript-Datei und vermittelt als Proxy zwischen Webanwendung und Netzwerk. Das Manifest enthält als JSON-Datei wesentliche Informationen über die PWA und ihre Funktionen, die Application Shell liefert die Grundstruktur für eine responsive Benutzeroberfläche.
Eine PWA läuft über den Browser, ist allerdings auf dem Endgerät installierbar, kann via QR-Code verteilt werden und bietet auch Offline-Funktionalität. Sie ist von Suchmaschinen auffindbar und kann einige Funktionen mobiler Endgeräte nutzen (bspw. Push-Nachrichten senden). Die Übersicht über Vor- und Nachteile findest du hier:
Für eher funktionale Use Cases, z. B. für Maschinenüberwachung in der Industrie oder digitale Formulare.
Teilbar über Link oder QR-Code & leicht zu installieren.
Benötigt nur einen Browser zur Ausführung und ist damit unabhängig von Betriebssystem und Gerät.
Ist responsiv und kann auf Hardware und viele Funktionen mobiler Endgeräte zugreifen.
Ist Offline-fähig.
Mit einer No- oder Low-Coding-Lösung günstig erstellbar.
Anwendungsfall prüfen; eher für Industrie- und Firmenanwendungen geeignet als für Consumer Apps.
Verbreitung über gängige App-Stores teils erschwert.
V.a. bei grafik- und rechenintensiven Anwendungen reicht Leistung nicht immer an native Apps heran, da PWA im Browser laufen.
Auf iOS-Geräten kann es Einschränkungen geben (z. B. nicht verfügbare Hintergrundfunktionen).
Im Gegensatz zur nativen App kein Zugriff auf alle Hardware-Funktionen eines Endgerätes.
Offline-Nutzung oft mithilfe zwischengespeicherter Daten, also weniger „nahtloses“ Nutzererlebnis als native App.
Nach ein bisschen Theorie nun zur Praxis. Bevor du loslegst, solltest du dir überlegen, wie du die Progressive Web App erstellen möchtest. Du hast verschiedene Optionen:
Willst du eine Progressive Web App programmieren, sind solide Programmierkenntnisse in JavaScript, HTML und CSS nötig. Vorgefertigte Frameworks können aber hilfreich sein, um den manuellen Anteil zu verringern. Stellst du dafür Fachkräfte ein, musst du natürlich mit entsprechenden Kosten rechnen. Die Alternative ist, eine App entwickeln zu lassen.
Eine Progressive Web App zu erstellen ist mit No-Code auch für Laien möglich, die keine Kenntnisse in Programmiersprachen haben. Das funktioniert, weil bei dieser Technik mit vorgefertigten Funktionen gearbeitet wird, die sich zu einer PWA zusammensetzen lassen. Man spricht vom grafischen Programmieren. No-Code kommt allerdings an seine Grenzen, wenn es um individuellere und/oder komplexere Use Cases geht.
Auch Low-Code App-Development basiert auf grafischem Programmieren ohne Code und mit vorgefertigten Modulen und Funktionalitäten, bietet dank Erweiterbarkeit mit echtem Code aber mehr Individualisierbarkeit. Wichtig sind ein grundlegendes Verständnis von Software, Kreativität sowie Lernbereitschaft, denn dann lassen sich deutlich komplexere Use Cases abbilden als mit No-Code.
Progressive Web App Builder auf Basis grafischer Programmierung haben im Gegensatz zum herkömmlichen Entwicklungsansatz einige wichtige Vorteile: Du sparst Zeit, Kosten und entwickelst das Know-how im Unternehmen. Da wir Experten für Low-Coding sind, zeigen wir dir jetzt, wie du eine App ohne Programmieren erstellst.
Wenn du technisches Grundverständnis mitbringst sowie etwas Zeit für und Lust auf eine Lernkurve hast, kannst du mit einer geeigneten Low-Code-Plattform eine Progressive Web App erstellen und deployen, ohne Code schreiben zu müssen.
Das geht wesentlich schneller, als eine App komplett zu programmieren und hat auch noch einen weiteren Vorteil: Du kannst Ideen und Ansätze für deine Anwendung auch schneller und ohne großen, initialen Zeit- und Ressourcenaufwand verifizieren. In diesem Tutorial zeigen wir dir die ersten Schritte.
Use Case spezifizieren: Selbst wenn du schon eine Idee hast, wie du die PWA einsetzen willst, solltest du die Anwendung zunächst eingrenzen und das Problem, das du mit der PWA lösen willst, konkretisieren. Ein Use Case im Produktionsumfeld wäre z. B. die OEE-Darstellung (Overall Equipment Effectiveness). Dafür muss die PWA die (möglichst genau) automatisch erfassten Maschinendaten verarbeiten, speichern und visualisieren können.
In Anforderungen übersetzen: Gehe gedanklich von einer User Story aus. Frage dich, was der konkrete Bedarf deines Users ist und wo die PWA einen effektiven Mehrwert schaffen kann. Wenn wir beim Beispiel OEE bleiben, könnte dein Produktionsleiter über deine PWA z. B. den Wert von Halle 1 mit dem von Halle 2 vergleichen. Oder sogar verschiedene Standorte oder Produktionslinien. Die wichtige Frage in diesem Schritt ist: Was muss die PWA dafür können?
User Interface überlegen: Mit groben Mock-ups skizzierst du die späteren Bildschirmansichten (das User-Interface) und gibst der App einen ersten Look. In diesem Schritt erkennst du auch, ob für die gewünschte UI eventuell noch weitere technische Anforderungen notwendig sind und kannst deine Liste ergänzen.
Tool wählen: Wenn deine Idee in groben Umrissen steht, suchst du ein Tool aus, das deinen Anforderungen gerecht wird und dein geplantes User-Interface umsetzen kann. Unsere Low-Code-Plattform Heisenware z. B. eignet sich besonders gut zum Erstellen von Progressive Web Apps für Industrie und Maschinenbau.
Klein starten: Nimm dir am Anfang nicht zu viel vor, sondern konzentriere dich auf einen überschaubaren Teilbereich deines Use Cases, wie z. B. den OEE einer einzigen Anlage. Diesen Teilbereich aber setzt du von Anfang bis Ende um, sodass er in der PWA erfasst und visualisiert wird.
Testen, testen, testen: Jetzt testest du dein bisheriges Ergebnis auf verschiedenen Bildschirmen und Endgeräten. Der Heisenware App Builder zeigt dir bereits in der Vorschau, wie deine PWA auf Smartphone, Tablet und PC aussehen wird.
Evtl. User Tests: Wenn du möchtest, kannst du dein Zwischenergebnis schon Test-Usern zur Verfügung stellen, um Feedback zu erhalten. Heisenware bietet dir zu jedem Zeitpunkt der Entwicklung ein Resultat, mit dem du Testläufe in verschiedenen Phasen direkt umsetzen kannst.
Optimierung & Weiterentwicklung: Auf Basis deiner Testläufe entwickelst du die PWA konsequent weiter. Anschließend kannst du die Anwendung um weitere Bereiche deines Use Case ausbauen oder flexibel weitere Funktionen hinzufügen. Der Vorteil an einer PWA ist, dass sie als Website ausgeliefert wird. Das heißt, wenn du in Folgeversionen Änderungen einpflegst oder neue Funktionen hinzufügst, werden diese beim Neuladen der PWA automatisch angezeigt. Deine Nutzer müssen also keine neue Version herunterladen, installieren etc.
Das Resultat ist ein direkt einsatzfähiges Ergebnis, sodass du eine gute Grundlage hast, die du iterativ weiterentwickeln kannst – wenn z. B. bei komplexen Apps noch Funktionen fehlen oder sich Änderungsbedarf im laufenden Betrieb ergibt.
Wie dir unser Tutorial gezeigt hat, ist es keine Rocket Science, eine Progressive Web App zu erstellen. Grafisches Programmieren mit Low-Code bietet dir eine gute Basis, um in überschaubarer Zeit, mit vergleichsweise geringem Kostenaufwand zu einem funktionalen Ergebnis zu kommen.
Wenn du mehr erfahren willst, stellen wir dir unseren App Builder gerne in einer unverbindlichen Web-Demo vor – einen Termin kannst du direkt online buchen!