Wie Sie Progressive Web Apps (PWAs) erstellen
Wenn Sie im Bereich Software-Entwicklung tätig sind, haben Sie sicher bereits von progressiven Web-Apps (PWAs) gehört. PWAs sind mittlerweile zu weit verbreitet, um sie ignorieren zu können. Sie bringen zahlreiche Vorteile mit sich, wenn es darum geht, das Engagement und die Bindung von Anwendern zu steigern. Was Sie vielleicht noch nicht wissen, ist, wie einfach das Erstellen von Progressive Web Apps sein kann. Genau darum geht es in diesem Artikel.
In einer Zeit, in der sich alles um die Customer Experience dreht, müssen Unternehmen Kunden überzeugen, warum sie anderen Unternehmen vorzuziehen sind. Genau hier kommen PWAs ins Spiel. Sie bieten eine neue Art und Weise, Apps bereitzustellen – und damit eine reibungslose User Experience. Lassen Sie uns kurz auffrischen, was PWAs sind. Anschließend gehen wir darauf ein, wie Sie PWAs einfach selbst erstellen können.
Was ist eine PWA?
PWAs kombinieren die Funktionen nativer Apps mit der Barrierefreiheit von Websites. Hinzu kommt, dass für die Bereitstellung kein App Store erforderlich ist. Genau wie native Apps lassen sich PWAs offline ausführen. Sie können Push-Benachrichtigungen senden und auf Gerätehardware wie Kameras oder GPS zugreifen. Dies erlaubt es Ihnen, Benutzererlebnisse zu erstellen, die denen in nativen Apps auf mobilen oder Desktop-Geräten gleichen.
Dabei werden PWAs – anders als native Apps – mit Standard-Webtechnologien wie HTML, CSS und JavaScript erstellt. So müssen Sie sich nicht auf Mobile-spezifische Entwicklungsteams verlassen. Dies reduziert sowohl den Zeit- als auch den Kostenaufwand für die Erstellung. Weitere Vorteile von PWAs sind:
- Schnellere Entwicklung und geringere Instandhaltungskosten: Da PWAs für Mobile optimierte Versionen von Webseiten sind, haben Sie eine Codebasis für alle Geräte.
- Einfachere Bereitstellung: PWAs müssen nicht über App Stores verteilt werden. Das heißt: Wenn Sie Ihre App aktualisieren müssen, um z. B. einen Fehler zu beheben, brauchen Sie nicht auf eine Freigabe durch den App Store zu warten. So können Sie die neue Version deutlich schneller herausbringen.
- Größere Reichweite: PWAs sind über Suchmaschinen auffindbar und dadurch leichter zu finden.
- Höhere Kundenzufriedenheit: Da Anwender die App nicht aus dem App Store herunterladen müssen, ist der Download einer PWA wahrscheinlicher als der einer nativen App. Zudem haben PWAs eine geringere Größe (oft unter 1 MB). Dadurch ist der Download deutlich schneller und nimmt weniger Platz auf dem Gerät des Benutzers ein. So können Sie das Engagement von Kunden steigern und Wartezeiten reduzieren.
Wenn Sie mehr darüber erfahren möchten, welche Vorteile PWAs bieten und wann Sie sie nativen Apps vorziehen sollten, empfehlen wir Ihnen diesen Artikel zum Thema.
Wie funktioniert eine PWA?
Wir haben gesehen, was PWAs sind und wie sie sich in der Praxis anwenden lassen. Was aber passiert vom technischen Standpunkt aus gesehen? Eine PWA ist eine App, die über eine sichere Verbindung von Service-Workern bedient und durch eine manifest.json-Datei unterstützt wird. Das klingt kompliziert? Ist es aber gar nicht.
Ein Service-Worker ist eine einfache Datei, die es der PWA erlaubt, HTML, CSS und Bilder im Browser-Cache zu speichern, um sie auch bei fehlender Netzwerkverbindung anzuzeigen. Die JSON-Datei ist ein Speicher für die Informationen der App – also all das, was Sie sehen, wenn Sie die App auf dem Hauptbildschirm Ihres Smartphones aufrufen. Schließlich ermöglicht eine sichere Verbindung, dass auch alle anderen Komponenten sowohl online als auch offline zusammenarbeiten.
Was im Hintergrund der PWA geschieht, ist also nicht besonders komplex. Gleichzeitig sind jedoch eine Menge Anpassungen möglich. Dies macht PWAs auch für all diejenigen interessant, die tiefer gehen wollen.
Das Erstellen von Progressive Web Apps
Stellen Sie sich vor, Sie arbeiten in der IT-Abteilung einer Flughafeninspektionsfirma. Flughäfen beauftragen Ihr Unternehmen damit, den sicheren Start und die sichere Landung von Flugzeugen zu gewährleisten, was eine Reihe komplexer Aufgaben beinhaltet. Um die Arbeit effizienter zu gestalten, hat Ihr Chef Sie gebeten, eine Inspektions-App zu entwickeln, mit der Feldinspektoren den Zustand gängiger Sicherheitsbelange auf dem Flughafen registrieren können. Die App soll:
- Feldinspektoren das Fotografieren auf der Landebahn ermöglichen
- auf das GPS des Geräts zugreifen
- offline funktionieren, da die Inspektoren vor Ort möglicherweise keinen Internetzugang haben
- auf mehreren Geräten funktionieren
In diesem Fall ist eine PWA die beste Lösung. Selbst wenn Sie später Änderungen vornehmen müssen, können Sie Ihre PWA iterieren – und jeder erhält die neue Version, ohne dass ein App Store involviert ist. Hier ist ein Beispiel für eine PWA, die Sie für dieses Szenario erstellen könnten.
Und nun stellen Sie sich vor, dass Sie Ihre App per Knopfdruck in eine PWA verwandeln könnten. In OutSystems ist es tatsächlich so einfach. Unsere Low-Code-Plattform generiert automatisch alle benötigten Ressourcen und verwandelt Ihre App in eine PWA, wenn Sie die PWA-Bereitstellung aktivieren. Nach diesem einfachen Schritt sind Sie bereit, die Software an Ihre Endanwender zu verteilen. Registrieren Sie sich für ein kostenloses Personal Environment und sehen Sie selbst, wie einfach das Ganze ist.
Nehmen Sie die Flughafen-App, die wir erstellt haben, als Beispiel. Es handelt sich um eine PWA mit vier Bildschirmen, die auf die Kamera und das GPS des Geräts zugreifen, mit Offline- und Synchronisierungsfunktionen. Diese App wurde mit OutSystems erstellt – und die Entwicklungszeit betrug 19 Minuten. Sind Sie neugierig geworden? Dann schauen Sie sich am besten auch das Webinar Wie Sie Progressive Web Apps (PWAs) mit Low-Code erstellen (auf Englisch) an.