Ein Umfangreicher Leitfaden für Progressive Web Apps

In den letzten Jahren hat sich die Weise, wie wir auf das Internet zugreifen, stark verändert. Mittlerweile generieren die Mobiltelefone 51,53% des gesamten weltweiten Website-Trafiks. Die Welt wird mobiler und wir gewöhnen uns immer mehr daran, die Daten aus Internet unterwegs zu konsumieren.

Diese Veränderung bringt die Mobil- und Webtechnologien auf eine neue Ebene. Es erscheinen neue Spitzenleistungen, die die Interaktion zwischen Unternehmen und Kunden erleichtern und das Erlebnis des Endnutzers verbessern. Einer von diesen neuesten Trends sind Progressive Web Apps (PWA). Diese Apps stellen eine perfekte Mischung aus Web- und nativen Apps dar. Das bedeutet, dass sie einen einfacheren Zugang und Navigation haben, wobei auch für die Unternehmen kostengünstiger zu entwickeln sind.

In diesem Leitfaden werden wir folgende Themen besprechen:

• Was sind PWAs?
• Wie funktionieren die PWAs?
• Vorteile von progressiven Web-Apps im Vergleich zu mobilen Apps.
• Populäre Tools zur PWA-Entwicklung.

Was sind progressive Web-Apps?

Kurz gesagt, eine progressive Web-App (PWA) ist eine Art Web-App, die eine Kombination aus verschiedenen Technologien, Design Konzepten und Web-APIs umfasst, die eine ähnliche Benutzererfahrung wie native mobile Apps bietet. Dies bedeutet, dass PWAs Webtechnologien in ihrem Kern verwenden, während sie die gleichen Funktionen ausführen und ein natives Erlebnis bieten.

Die Idee, Web- und native Apps in den PWAs zu mischen, wurde erstmals 2015 von Google vorgestellt und seitdem wächst ihre Popularität ständig. Viele Unternehmen geben an, dass PWAs ihnen geholfen haben, die Benutzeraktivität zu verdoppeln und ihre Konversionsraten zu steigern.

Wie funktionieren die PWAs?

Das auffälligste Merkmal von allen PWAs ist, dass sie in einem Webbrowser ausgeführt werden. Webbrowser funktionieren als virtuelle Maschinen für diese Apps, und führen PWAs in ihren Umgebungen aus. Während native Apps Android- oder iOS-Betriebssysteme zum Starten benötigen, brauchen PWAs nur einen Browser.

Die meisten Webbrowser unterstützen die PWAs. Einige von denen arbeiten jedoch gerade noch an der Integration der Technologie (Internet Explorer oder Safari), während andere sie bereits implementiert haben (Google Chrome, Mozilla Firefox, Edge und Brave).

PWA-Architektur

Die PWA-Architektur umfasst:

Service Worker

Service Worker ist eine Abstraktionsschicht, die Backend und Frontend in einem Browser verbindet. Es stellt eine Javascript-Datei dar, die eine Verbindung zum Code der HTML-Seite erstellt. Service Worker verarbeitet alle Benutzeranfragen und hat Cache- und Datenbankzugriff zum Speichern von Daten. Das bedeutet, dass eine PWA auch dann funktioniert, wenn ein Benutzer offline geht oder eine schwache Internetverbindung hat.

Web App Manifest

Web App Manifest ist die JSON-Datei, die die Hauptparameter einer PWA bestimmt. Beispielsweise kann es den Namen einer App in einem Browser definieren, welches App-Symbol verwendet werden soll, wie PWA angezeigt wird und viele andere Funktionen. App Manifest installiert PWA auf einem mobilen Bildschirm als eine eigenständige Anwendung.

HTTPS

Das HTTPS-Protokoll gewährleistet, dass die Daten, die ein Benutzer über PWAs sendet, sicher sind. HTTPS verschlüsselt die Daten mit dem SSL-Protokoll. Dies bedeutet, dass Softwareingenieure PWA verwenden können, um Bank- oder Finanzanwendungen zu erstellen, bei denen die Verschlüsselung personenbezogener Daten von entscheidender Bedeutung ist.

App-Shell

Application Shell ist das, was den PWAs hilft, wie native Apps auszusehen. Eine App-Shell stellt ein Skelett der grafischen Benutzeroberfläche (GUI) für PWAs dar. Es besteht aus minimalem HTML, CSS und JavaScript und ermöglicht das sofortige Laden der Grundelemente einer App und das Einfügen der geladenen Daten.

Push-Benachrichtigung

Push-Benachrichtigung ist eine kleine Popup-Nachricht auf einer Website. Normalerweise können Benutzer eine App auf ihrem mobilen Bildschirm installieren und neue Updates und Benachrichtigungen abonnieren. Danach kann der Nutzer die Abonnement Benachrichtigungen mit den neuesten Nachrichten und Updates auf seinem Gerät bekommen, ohne die Website zu besuchen.

Vorteile von progressiven Web-Apps im Vergleich zu mobilen Apps

Für die Mobile App Entwicklung müssen die Softwareentwickler je nach Plattform verschiedene Programmiersprachen lernen. Beispielsweise müssen sie Objective-C für iOS und Java für Android lernen, während PWAs nur HTML, CSS und JavaScript verwenden und auf jedem Gerät über einen Browser ausgeführt werden können. PWAs haben das Wort „progressiv“ in ihrem Namen, was bedeutet, dass sie darauf abzielen, die Leistung im Vergleich zu anderen Apps zu verbessern.

Die wichtigsten Merkmale sind Zuverlässigkeit, Geschwindigkeit und Engagement.

PWAs sind:

• zuverlässig, da ihre Leistung nicht von der Qualität der Internetverbindung abhängt und sie auch offline erfolgreich arbeiten können;
• schnell, da sie schnell und reibungslos Daten mit dem Internet austauschen und ihre Benutzeroberflächen kaum jemals verzögern;
• ansprechend, da sie eine native App-Benutzererfahrung bieten.

Wollen wir nun die PWAs mit anderen mobilen Apps genauer vergleichen.

PWAs vs. Native Apps

Native Apps werden für eine bestimmte Plattform oder ein Gadget erstellt. Sie haben Zugriff auf alle Funktionen des Geräts wie Mikrofon, Kamera, GPS und andere und haben eine bessere Integration mit dem Betriebssystem und der Hardware des Geräts. Native Apps haben starke Vorteile, es gibt jedoch einige Funktionen, bei denen sie im Vergleich zu den PWAs verlieren:

• PWAs haben niedrigere Entwicklungskosten, da sie billiger zu warten und zu aktualisieren als native Apps sind. Darüber hinaus müssen Sie nicht nach engspezialisierten Spezialisten suchen, um spezielle Funktionen für eine bestimmte Programmiersprache zu erstellen.
• PWAs lassen sich schneller entwickeln als native Apps, da sie in verschiedene mobile Betriebssysteme passen.
• PWAs nehmen im Vergleich zu nativen Apps weniger Speicherplatz ein. Native Apps müssen vollständig heruntergeladen und auf einem Gerät installiert werden, während PWAs auf Webservern gespeichert werden.
• Es ist einfacher, auf PWAs zuzugreifen und sie zu verteilen als die nativen Apps. Um eine native App zu erhalten, müssen die Nutzer in App Store gehen, während PWAs auf derselben Webseite, die sie besuchen, platziert werden und leicht nur mit einem URL-Link geteilt werden können. Darüber hinaus ist es nicht erforderlich, bestimmte Pass-Anforderungen zu erfüllen und die von App Stores festgelegten Standards zu erfüllen.
• Native Apps werden nicht in Suchmaschinen gelistet und verlieren daher den Kampf um Popularität. PWAs wiederum können in Suchmaschinenergebnissen platziert werden und können so um ein besseres Ranking konkurrieren.
• Obwohl PWAs über eine sichere HTTPS-Verbindung verfügen, haben native Apps mehr Möglichkeiten, Sicherheitsmaßnahmen einzurichten, wie z. B. die Multi-Faktor-Authentifizierung und das Übergeben von Sicherheitsanforderungen in App Stores.
• Native Apps sind leistungsfähiger und schneller als PWAs. Vor allem können native Apps viele Funktionen ausführen, die PWAs nicht können, z. B. Näherungssensoren, mobiles Bezahlen, Smart Lock oder die Interaktion mit anderen Apps, z.B. Kalender anschauen, Anrufe tätigen und mehr.

PWAs vs. Hybride Apps

• Hybride Apps sind solche Apps, die Funktionen einer nativen und einer Webanwendung kombinieren. Diese Technologie wurde als Reaktion auf die Entwicklung einzelner Plattformen in nativen Apps erfunden.
• Die Reaktionsfähigkeit von Hybriden Apps hängt von den Komponenten der Benutzeroberfläche einer Website ab.
• Hybride Apps sind App Store-abhängig, PWA-Apps nicht.
• PWAs lassen sich im Vergleich zu Hybriden Apps leicht anpassen.
• Die Entwicklung von Hybriden Apps erfordert tiefe Kenntnisse in der Entwicklung von nativen Apps.
• PWAs sind im Vergleich zu Hybriden Apps billiger zu entwickeln, da sie eine einzige Codebasis haben und keine vielseitigen Entwicklungsfähigkeiten erfordern.
• PWAs übertreffen die Leistung von Hybriden Apps deutlich, da sie eine einfachere Codestruktur haben und selbst bei langsamem Internet schnell sind.

Was sind die populärsten Tools zur PWA-Entwicklung?

PWA-Entwickler verwenden normalerweise die gleichen Frameworks und Tools für die Entwicklung gängiger Web-Apps. Hier ist eine Liste der beliebtesten PWA-Entwicklungstools:

React.js

React.js ist eines der besten Webentwicklungs-Frameworks und eignet sich dabei gut zum Erstellen von PWAs. Es unterstützt nur den Ansichtsmodus eines standardmäßigen Model-View-Controller-Entwicklungsmodells und ermöglicht das Einbetten von HTML in JavaScript-Dateien mit dem virtuellen DOM, das Webseiten serverseitig rendert.

Dieses Framework ist eine der beliebtesten Lösungen für die Webentwicklung, da es leicht zu erlernen und sehr flexibel zu verwenden ist.

Knockout

Knockout ist eine kostenlose JavaScript-Bibliothek, die beim Erstellen von leichten PWAs hilft. Diese kleine (13 KB), aber multifunktionale Bibliothek ermöglicht den Aufbau dynamisch geänderter Schnittstellen.

Knockout stellt Softwareentwicklern Vorlagen zur Verfügung, die die Erstellung von komplexen Apps erleichtern, indem sie die Duplizierung von DOM-Elementen minimieren und sie einfacher in HTML einbetten. Außerdem verwendet Knockout HTML5-Daten, um HTML-Elemente an Datenobjekte in JavaScript zu binden, und benötigt kein JSX wie im Fall von React.

Diese JavaScript-Bibliothek ist eine wirklich gute Lösung für Webingenieure, da sie die PWA-Entwicklung erheblich erleichtert.

Lighthouse

Lighthouse ist ein von Google entwickeltes automatisiertes Tool zur Verbesserung der Webseitenqualität. Softwareentwickler können Lighthouse als Plugin in Chrome verwenden, um Tests durchzuführen, wie eine PWA offline funktioniert, Seiten lädt, Authentifizierung bereitstellt und vieles mehr. Dieses Open-Source-Audit-Performance-Tool hebt die möglichen Programmabläufe hervor und hilft den Webentwicklern, robuste und effektive Lösungen zu entwickeln.

Webpack

Webpack ist ein Tool zum Kompilieren von JavaScript-Modulen in einen Browser. Viele Webentwickler verwenden Webpack, da es den effektiven Aufbau des Frontends ermöglicht. Webpack hilft beim Erstellen eines Service Workers und eines Manifests, die die wesentlichen Bestandteile jeder PWA sind. Dieses leistungsstarke Tool ermöglicht den Aufbau stabiler und hochwertiger PWA-Lösungen.

Die progressive Web-App-Technologie entwickelt sich schnell. Um die Standards der PWA-Qualität und -Entwicklung hoch zu halten, hat Google vor kurzem eine Progressive-Web-Apps-Checkliste veröffentlicht, die die wichtigsten Funktionen, die jede PWA haben sollte, enthält.

Hier ist die Liste der Funktionen, die jede PWA haben sollte, um im Google Play Store veröffentlicht zu werden:

• PWAs müssen auf jedem drahtlosen Gerät ausgeführt werden, sei es ein Tablet oder ein Mobiltelefon.
• Die Seiten von PWA sollten mit einer 3G-Verbindung schnell geladen werden;
• Wenn kurz im Offline – müssen PWAs die Leistungsmetriken hoch halten und der Seitenwechsel sollte reibungslos sein;
• Apps sollten auf jedem Browser laufen;
• PWAs müssen auf einer sicheren HTTPS-Verbindung ausgeführt werden;
• Benutzer können PWAs auf jeder Bildschirmgröße mit dem korrekt angezeigten Inhalt anzeigen;
• Nutzt einen Service Worker;
• Jede PWA-Seite sollte eine URL haben;
• PWAs sollten ein <meta name=“viewport“>-Tag mit width oder initial-scale verwenden;
• Nutzer können benachrichtigt und gefragt werden, ob sie PWAs auf ihren Geräten installieren möchten;
• Das Web-App-Manifest sollte Metadaten enthalten, bevor es auf einem Startbildschirm installiert wird.

Fazit

Progressive Web Apps haben sich bereits für viele Unternehmen als eine Technologie, die viele Vorteile hat, erwiesen. Sie ermöglicht es den Unternehmen, ihre Zielgruppen besser zu erreichen und die Kundenloyalität sowie den Umsatz des Unternehmens zu steigern.

Darüber hinaus sind PWAs im Vergleich zu nativen und hybriden Apps viel billiger in der Entwicklung und Wartung. Wir erwarten auch, dass in naher Zukunft mehr Unternehmen ihre Aufmerksamkeit auf PWAs richten werden, um kommerzielle Vorteile zu erzielen und näher zu ihren Kunden zu bleiben.