Was sind Progressive Web Apps (PWA)

Webseiten, die die Eigenschaften von nativen Apps besitzen und die Benutzerfreundlichkeit auf mobilen Endgeräten verbessern, heißen PWA (Progressive Web Apps). Wie eine herkömmliche Website lässt sich eine progressive Web App durch die Eingabe der Adresse (URL) im Browser aufrufen. Zusätzlich kann eine PWA zum Homescreen eines mobilen Endgeräts hinzugefügt und über ein Icon aufgerufen werden. Mittels der Browsertechnologie Service Workers und dem HTTP-Protokoll lässt sich die Kommunikation zwischen dem Client und dem Server im Hinblick auf das Caching optimieren. Dies ergänzt die PWAs um Offline-Funktionen. Die progressiven Web Apps vereinen die Vorzüge von klassischen Webseiten mit den Vorteilen der mobilen Anwendungen.

Die wichtigsten Eigenschaften einer PWA

Eine progressive Web App basiert auf dem von der Suchmaschine Google empfohlenen „Progressive Enhancement“. Der zentrale Aspekt des Entwicklungsansatzes ist, dass sich alle grundlegenden Funktionen einer Webseite auf jedem Gerät und mit jeder Art von Internetverbindung verwenden lassen. In ihren rudimentären Funktionen sollen die Webseiten selbst auf Geräten ohne Internetverbindung und ohne Flash, JavaScript und CSS funktionieren. Bei der Entwicklung der progressiven Web Apps kommen JavaScript, HTML5 und CSS3 zum Einsatz. Mit dem Web App Manifest lässt sich über die Frameworks Polymer oder Angular das Erscheinungsbild der Webseite in Form einer App umsetzen. Durch die Application Shell Architecture sind in JavaScript, CSS3 und HTML5 minimale Ressourcen vonnöten. Im Quellcode der progressiven Web App steht nur das Nötigste. Über ein API (application programming interface) werden die Inhalte der Web App dynamisch geladen. Mit dem Entwickler-Tool Lighthouse lässt sich eine korrekte API-Integration überprüfen und die PWA kann auf Bugs, Fehler und Regresse untersucht werden.

  • progressive Web Apps funktionieren zuverlässig und laden die vom Nutzer angeforderten Inhalte selbst, wenn die Verbindung zum Internet entweder schlecht ist oder nicht besteht.
  • PWAs reagieren sofort auf die Interaktionen der Nutzer, verhindern ein hackeliges Scrolling und integrieren Animationen.
  • die Nutzung der progressiven Web App unterscheidet sich für den User nicht von einer nativen App, die für sein mobiles Endgerät entwickelt wurde.

Service Worker sind ein zentraler Bestandteil

Die Browsertechnologie Service Worker ist das zentrale Element, um die Umsetzung einer progressiven Web App zu ermöglichen und ihre Vorteile verwenden zu können. Die Browsertechnologie arbeitet im Hintergrund der Webseite und ermöglicht dem Nutzer das Laden diverser Inhalte in seinen Cache-Speicher, ohne eine weitere HTTP-Kommunikation. Damit lassen sich bestimmte Inhalte der progressiven Web Apps mit einer schlechten oder nicht vorhandenen Internetverbindung abrufen. Durch die Service Worker steht den Nutzern per JavaScript ein Proxy zwischen dem Server und dem Webbrowser zur Verfügung. Ruft der Nutzer diverse Inhalte ab, befinden sich diese bereits in seinem Cache, da dies von den Entwicklern zuvor so definiert wurde. Zum Einsatz kommen gängige Verfahren wie Prefetching und Prerendering. Bei der Entwicklung der Webseiten werden die Inhalte als Schlüsselressourcen identifiziert und mithilfe des JavaScripts vorgeladen.

Besonderheiten und Vorteile von progressiven Web Apps

Progressive Web Apps wissen im Voraus, welche Inhalte vom Nutzer angefordert werden und müssen diese nicht über eine aktive Internetverbindung nachladen. Dadurch reduziert sich die Abhängigkeit vom Internet deutlich. Da es keine hohen Ladezeiten gibt, erhöht sich die Benutzerfreundlichkeit. Jede PWA kann ohne einen direkten Zugriff auf den jeweiligen App Store verwendet werden. Im Gegensatz zu nativen mobilen Apps ist eine Installation nicht vonnöten. Dennoch besitzen die progressiven Web Apps einige Funktionen, die ausschließlich den nativen Apps vorbehalten sind. Die Nutzer können die progressive Web App mit nur einem Klick ihrem Homescreen hinzufügen. Sie lassen sich genau wie native Apps im Vollbildmodus auf Smartphone oder Tablet verwenden. Durch integrierte Push-Mitteilungen erhöhen sich Interaktionsraten und die Nutzer erhalten persönliche Angebote und zusätzliche Informationen. Das Web App Manifest ist über ein Skript mit der Webseite verbunden. In diesem können die Entwickler das Aussehen der progressiven Web App definieren. Über einen einfachen Skriptbefehl lassen sich zahlreiche Einstellungsmöglichkeiten durchführen und mit diesen werden die PWAs personalisiert.

Fragen zum Projekt oder zum Thema Progressive Web Apps?

Ich freue mich, von Ihnen zu hören.