Wann eignen sich Progressive Web Apps ?

Wann eignen sich Progressive Web Apps ?

Progressive Web-Apps zeigen Wirkung

Seit April dieses Jahres hat Safari zu klassischen Browsern aufgeschlossen. Er unterstützt nun WEB-APIs, die notwendig sind, um Offline-Web-Apps zu realisieren.

Die moderne Web-Plattform wurde um zahlreiche Features erweitert:

  • Die Browser wurden grundlegend überarbeitet. Sie unterstützen nun erweiterte Funktionen auf dem Level mobiler Plattformen.
  • Zahlreiche Technologien wurden mit optimierten Schnittstellen neu konfiguriert, um den aktuellen Anforderungen von Anwendern, Entwicklern und Behörden gerecht zu werden.
  • App-Updates erfordern nicht mehr den Download umfangreicher binärer Dateien. Es werden nur kleine Teile heruntergeladen, welche für die aktuell genutzte Funktionalität erforderlich sind. Diese werden für Offline-Interaktionen dynamisch zwischengespeichert.

Hierdurch eröffnen sich neue Möglichkeiten für die User Experience, die im Übrigen von vielen Unternehmen bereits seit geraumer Zeit genutzt werden.

Einsatzmöglichkeiten und Reichweite – die wichtigsten Faktoren für jede App

Bis Web-Technologien und HTML eine solide Basis für Apps darstellten, war es ein langer Weg. Ende der 2000er Jahre waren Web-Plattformen für einen universellen Einsatz noch nicht komplett ausgereift. Investitionsentscheidungen gingen daher in eine andere Richtung.

Heute werden die beliebtesten Apps mit nativen Android- oder iOS-Schnittstellen realisiert, die auf Java/Kotlin oder Objective-C/Swift basieren.

Die Entwicklung im Web schreitet jedoch unaufhörlich voran. Enorme Veränderungen ergaben sich durch einen Schachzug von Apple, der diesmal Safari betraf.

Möglicherweise können Sie sich vorstellen, dass Apps nun über optimierte Benutzeroberflächen verfügen und noch bessere Erfahrungen ermöglichen. Störungsfreie Animationen, verbesserte Reaktionsfähigkeit auf intuitive Gesten und exzellente Leistung, die nicht von den Netzwerkbedingungen abhängt – all das klingt hervorragend und wird von den Anwendern heute fast schon erwartet. Eine weitere Veränderung ergab sich jedoch auch in der Entwicklung.

Bisher fehlten in Web-Technologien die Kernfunktionen für App-Entwickler. Nun wird das Web dazu befähigt, wodurch völlig neue Möglichkeiten entstehen.

Auf dieser Grundlage rücken Web-Apps oder PWA (Progressive Web-Apps) näher an eine neue Generation der App-Entwicklung und Web-Technologie heran. Traditionelle Browser decken zunehmend die gängigsten Funktionen mobiler Anwendungen ab und erweitern sie nun um Features einer Web-Plattform:

Alle diese Funktionen werden plattformübergreifend realisiert. Darüber hinaus kommen Web-Apps mit schlanken Downloads der tatsächlich benötigten Funktionalitäten aus. Sie sind aber dennoch in vollem Umfang offline verfügbar. Die kleinteiligen App-Chunks werden fortlaufend aktualisiert. Neue Funktionen werden bereitgestellt, ohne dass umfangreiche App-Store-Reviews notwendig sind.

Mit Web-Technologien ist es möglich, sämtliche Anwendungen als Konstrukt kleinerer Apps zu handhaben, wobei jede von ihnen einen eigenständigen Teil der Funktionalität beinhaltet.

Es existieren zahlreiche weitere Web-APIs, die native iOS- und Android-Plattformen mit Browsern zusammenführen. Ein gutes Beispiel finden Sie hier: [Was im Web bereits möglich ist](https://whatwebcando.today/). Praktische Beispiele für den Einsatz neuester Web-APIs sind außerdem in [diesem Abschnitt]( https://developers.google.com/web/fundamentals/native-hardware/user-location) der Grundlagen-Infos von Google verfügbar.

Google Chrome hat die Entwicklung in diesem Bereich seit 2014 vorangetrieben. Die Firefox-Community hielt Schritt. [Edge] (https://twitter.com/tomayac/status/960963468756180993) und [Safari] (https://twitter.com/addyosmani/status/979606651429822464) haben ebenfalls massiv investiert, um ihre Engines neu auszurichten und zu überarbeiten. Zudem hat Safari mit der Integration der Basis-Technologie Service Worker API begonnen.

Endlich sind wir an dem Punkt angelangt, an dem Offline-Web-Apps massentauglich sind.

Service Workers: Web Worker in parallelen Threads

Dank Service Workers ermöglichen moderne Web-Apps folgende Aspekte:

  • Ein Startbildschirmsymbol, das die Web-Anwendung im Vollbildmodus als native App öffnet
  • Native Dialoge zum Hinzufügen der App zu Startbildschirmen mit nur einem Klick
  • Eine performante und interaktive App, die selbst bei unzuverlässigen Netzwerkverbindungen funktioniert
  • Push-Nachrichten, die User zurück in die App holen

Der Service Worker ist eine Art Web Worker, der Ressourcenanforderungen und Serverbenachrichtigungen von Apps in einem parallelen Thread oder im Hintergrund verarbeitet, wenn die Anwendung im Haupt-Thread läuft oder komplett inaktiv ist. Service Workers ermöglicht es, die Hintergrundkommunikation mit Servern zu organisieren und Aufgaben einzuplanen. Sie können sich die Technologie als parallelen Webservice vorstellen, der gemeinsam mit Ihrer App auf dem Client läuft.

Service Workers fängt App-Requests ab und ermöglicht Folgendes:

  • Nutzen der Cache-Speicher-API für App-Ressourcen (z. B. HTML, CSS, JS und Bilddateien)
  • Durchführen von Requests mittels Fetch API
  • Daten via IndexedDB API speichern
  • Reagieren auf abgefangene Requests mit einer definierten Caching-Strategie

Jeder Request kann mit den zwischengespeicherten Daten und Ressourcen versorgt werden – unabhängig davon, ob die Netzwerkverbindung stabil oder unterbrochen ist. Die Implementierung dieser Art des Cache-Managements wäre mit nativen App-Technologien wesentlich komplexer. Zudem müssten die Anwender sämtliche App-Ressourcen schrittweise herunterladen. Aus Sicherheitsgründen kann Service Worker nicht direkt auf das DOM zugreifen und nutzt die postMessage-Schnittstelle, um mit den entsprechenden Seiten zu kommunizieren und DOM-Updates anzufordern.

Von diesen neuen Features profitieren Entwickler:

  • PWAs ermöglichen das Pre-Caching von Teilen der Web-Anwendung, sodass der Start beim nächsten Öffnen unverzüglich erfolgt
  • Es lassen sich mehrere Caches verwalten
  • Der Daten-Traffic kann minimiert werden, indem Sie vorgeben, welche Anforderungen vom Cache, aus einem lokalen Speicher oder via Netzwerk versorgt werden
  • Das Speichern von Daten im Offline-Zustand ist möglich. Die Daten werden übertragen, sobald der Nutzer wieder online ist.
  • Die Speichernutzung ist effizienter, da der Browser Service Workers startet und bei Inaktivität beendet.

Sie möchten mehr erfahren? Dann sehen Sie sich den kürzlich veröffentlichten [PWA-Kurs] (https://developers.google.com/web/ilt/pwa/) von Google an. Er liefert einen hervorragenden Überblick über die wichtigsten applikationsbezogenen Web-APIs und stellt einen guten Ausgangspunkt für erste Schritte dar. Wir empfehlen außerdem diese [Video-Reihe] (https://www.youtube.com/watch?v=z2JgN6Ae-Bo&index=1&list=PLNYkxOF6rcICnIOm4cfylT0-cEfytBtY) aus dem vergangenen Monat. Sie liefert detaillierte Einblicke in die Möglichkeiten von Web-Anwendungen.

Was erwarten mobile Nutzer heute?

Zurück zur Kernfrage: Diese Anforderungen haben Benutzer an eine moderne App:

  • Schnelligkeit. Reibungslose Animation, ruckelfreies Scrollen und reibungslose Navigation
  • Integration ins Betriebssystem. Die App wird vom Startbildschirm aus geöffnet. Der User muss hierfür keinen Browser nutzen. Die volle Leistungsfähigkeit des Endgeräts wird ausgenutzt.
  • Zuverlässigkeit. Schnelles Laden und Offline-Verfügbarkeit in instabilen Netzwerken
  • Fesselnd. Senden von Push-Nachrichten, um Nutzer bei relevanten Ereignissen an die App zu erinnern.

Dies entspricht dem „FIRE-Konzept“ (per Google-Definition) – und nun können all diese Möglichkeiten von Entwicklern genutzt werden.

Bisher entwickelte Single-Page-Applikationen ziehen auf diese Weise mit nativen Apps gleich. Sie werden zu Web-Apps.

Why progressive web apps?

PWAs werden in der Regel im Rahmen einer Application Shell entwickelt. Diese enthält lokale Ressourcen, die die Web-App benötigt, um das Grundgerüst der Benutzeroberfläche zu laden. Die offlinefähige Methode versucht zudem, den nächsten Inhalt mittels gecachtem JavaScript abzurufen. Auf diese Weise wird der Seiteninhalt dynamisch geladen, während der Benutzer durch die App navigiert. Der Content ist somit zuverlässig und unverzüglich auf dem Bildschirm des Benutzers verfügbar.

Das Frontend entwickelt sich mit zunehmender Geschwindigkeit. Mittlerweile können Web-Apps über folgende Wege bereitgestellt werden: SSR (serverseitiges Rendering), CSR (Client-seitiges Rendering), hybride Methoden, Pre-Rendering, Cache-Snapshots und Streaming. In diesem Umfeld führt kaum ein Weg an einem Frontend-Architect vorbei.

Wie werden die Technologien von Unternehmen eingesetzt?

Laut Google verbringen Benutzer im Bereich nativer Apps 80 Prozent ihrer Zeit in ihren persönlichen Top 3 Applikationen. Ja, in nur 3 Apps! Chrome-Benutzer auf Android besuchen hingegen 100 Seiten pro Monat. 2 von 3 Einkäufen auf dem Handy finden im Web statt – nicht in nativen Apps! Nicht zuletzt sind die Kosten der Kundengewinnung dank der Auffindbarkeit über Suchmaschinen bei Web-Apps deutlich geringer.

Die größte Herausforderung im Software-Umfeld ist die Bereitstellung

Zahlreiche Beispiele zeigen, dass PWAs völlig neue Erfahrungen hinsichtlich der Bereitstellungsgeschwindigkeit ermöglichen. Das Ziel ist es, Anwender zur Nutzung des Dienstes zu bewegen – nicht jedoch zur Installation der App. Dank PWA gelangen Nutzer von einer Landingpage direkt zur App. Eine Installation ist nicht notwendig.

Unternehmen sind in der Lage, ihren Kunden Online-Services anzubieten, wobei die komplizierte App-Store-Registrierung und der umfangreiche Bereitstellungsprozess entfallen. Apps können zudem ohne Zeitverlust upgedatet werden.

AliExpress realisierte mit PWA einen massiven Anstieg der Verweildauer auf seiner Seite (74 Prozent). Die Anzahl der aufgerufenen Seiten verdoppelte sich. Darüber hinaus ist die Nutzererfahrung bei Anwendern mit eingeschränkter Browser-Unterstützung immer noch zielführend. Dies hat es AliExpress ermöglicht, die Conversion-Rate über iOS (mit der alten Cache-API!) um 82 Prozent zu steigern!

Sie denken darüber nach, Offline-Funktionalitäten und Web-Features zu integrieren? Dann stehen Ihnen folgende Möglichkeiten zur Verfügung:

  • Von Grund auf neu entwickeln
  • Mit einer anderen Version einsteigen
  • Auf ein einzelnes Feature konzentrieren

Ein weiteres Beispiel aus dem E-Commerce ist Konga. Das Unternehmen agiert in Afrika – dort ist Datennutzung teuer. Konga begann komplett von vorne und entwickelte Web-Kataloge sowie Check-Out-Funktionen, um offline verfügbar zu sein. Der Fokus lag klar auf der Minimierung des Datenvolumens. Im Vergleich zur nativen App des Anbieters verursachte das initiale Laden 92 Prozent weniger Auslastung. Das Datenvolumen für die erste Transaktion war 82 Prozent geringer.

Ein anderer Ansatz besteht darin, eine zweite Version einer Website oder gar ein einzelnes Feature zu entwickeln, um einen bestimmten Bereich oder eine definierte User-Journey zu optimieren. Air Berlin hatte nicht die Möglichkeit, PWA flächendeckend einzuführen. Man konzentrierte sich also auf die Nutzererfahrung nach der Buchung. Die Nutzer des Unternehmens haben wenig Zeit. Am Flughafen benötigen sie einen schnellen Zugriff auf den Reiseplan, ihre Bordkarte und Informationen zum Reiseziel. Wenn Sie heute mit Air Berlin fliegen, werden Sie feststellen, dass die Ladezeit für diese Informationen weniger als eine Sekunde beträgt – selbst ohne Internetverbindung. Der Ansatz ist schnell, zuverlässig und überzeugend.

Mit „Twitter Lite PWA“ reihte sich vor einigen Jahren auch Twitter in die Riege von Unternehmen ein, die mit Offline-Features in Web-Apps experimentieren. Die App-Größe des Anbieters reicht von 24 MB (Android) über 214 MB (iOS) bis hin zu 0,6 MB für die Web-App. Die Web-Variante verzeichnet gleichzeitig die meisten aktiven User.

Eine moderne Browser-IDE-CodeSandbox kompiliert JavaScript-Projekte mit Webpack und Babel direkt aus Github mithilfe von Service Workers im Browser. Dies ermöglicht es, offline zu entwickeln und online zusammenzuarbeiten.

Sie möchten mehr erfahren? Finden Sie heraus, welche Webseiten Sie mit Chrome besucht haben, Sie möchten mehr erfahren? Finden Sie heraus, welche Webseiten Sie mit Chrome besucht haben, die Service Workers verwenden.

Einige Hürden bestehen nach wie vor

Ist somit der Weg frei? Nicht ganz. Aktuell bestehen folgende Herausforderungen:

  • Es existiert immer noch kein Web-Push oder Background-Sync auf iOS. Safari muss noch einige Fehler beheben – darunter das erneute Laden von Apps nach Inaktivität. Das aktuelle Engagement deutet jedoch daraufhin, dass diese Probleme relativ schnell behoben sein sollten.
  • Der Speicherplatz für Web-Anwendungen muss kleiner sein, als dies bei nativen Apps der Fall ist. Es ist demnach ein verantwortungsvoller Umgang mit dem genutzten Gerätespeicher erforderlich.
  • Die Integration mit mobilen Betriebssystemen muss stärker vorangetrieben werden, um eine weitere Harmonisierung von applikationsbezogenen Web-APIs und nativen Schnittstellen zu realisieren.
  • Natürlich existiert keine ideale Entwicklungsumgebung. Die verfügbaren APIs sind noch nicht vollständig implementiert und entsprechen nur teilweise den Spezifikationen sämtlicher herkömmlicher Browser. Das Umgehen von Fallstricken erfordert in diesem Kontext spezielles Know-how.

Hier finden Sie einen guten Vergleich von [Service-Worker-basierten APIs] https://jakearchibald.github.io/isserviceworkerready/ von Jake Archibald. Interessant sind zudem die aktuellen Reviews aus [Tests auf iOS und Android] (https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a), welche die zentralen Probleme aufgreifen.

Web-Apps auf dem Vormarsch

Im Web-Bereich wurden in den vergangenen ein bis zwei Jahren vermutlich die meisten Technologien, Schnittstellen und Frameworks entwickelt und wieder verworfen. Die Entwicklungszyklen sind hierbei kurz. JavaScript wird jedes Jahr aktualisiert. Open-Source-Communities leisten Enormes. Und Sie haben die Möglichkeit, sich täglich via Twitter über wirklich belastbare Neuentwicklungen zu informieren.

Die Browser stehen in den Startlöchern. Sie werden auf den Home-Screens mobiler Endgeräte bald weitaus mehr leisten.

Wenn Sie weitere Fragen zur PWA-Entwicklung haben, wenden Sie sich gerne an das Team von K&C. Wir befassen uns derzeit aktiv mit diesem Themenbereich.

Kommentar hinzufügen

E-Mail-Adresse ist schon registriert. Bitte benutze Das Login-Formular oder nenne eine andere.

Du hast einen falschen Nutzernamen oder Passwort eingegeben

Sorry that something went wrong, repeat again!
EN DE
Kontaktieren Sie uns