Dieter Petereit 5. März 2018

Was sind Progressive Web Apps und wieso sollte dich das interessieren?

Wir schreiben das Frühjahr des Jahres 2018. Es handelt sich um das Jahr, in dem sich Progressive Web Apps aller Prognose nach endgültig durchsetzen dürften. Wenn du dich mit dem Thema bisher nicht beschäftigt hast, dann wird es jetzt höchste Zeit. Wir helfen dir dabei.

Die fortschreitende Mobilnutzung des Web bedroht die offenen Standards

Es lässt sich nicht leugnen. Man erkennt es an sich selbst und anderen. Viele Studien belegen es zusätzlich. Die Nutzung des Web verlagert sich mehr und mehr auf mobile Geräte. Dabei dominieren native Apps, die ihre Inhalte vorwiegend aus dem Web ziehen und innerhalb der App zur Anzeige bringen. Die Apps haben in diesem Prozess die volle Kontrolle über das Aussehen der Inhalte. Der eigentliche Bereitsteller der Informationen hat seinen Einfluss weitgehend verloren.

Der Stacheldraht sticht immer erst am Ende der Bewegungsfreiheit. (Foto: Pixabay)

Langfristig entwickelt sich daraus die Gefahr, dass Apps mit entsprechender Reichweite ganz auf das Web als Inhaltsgeber verzichten. Facebook wird hier gern als potenzielles Beispiel genannt. Sollte sich die Nutzung irgendwann so stark in Richtung mobiler Plattformen verändert haben, dass die Unterhaltung eines webbasierten Zugangs unnötig erscheint, könnte Zuckerberg durchaus auf die Idee kommen, nur noch mit Apps und direkten Datenbankverbindungen zu arbeiten. Eine ohnehin schon stark geschlossene Gesellschaft schlösse sich noch mehr und schottete sich vor offenen Standards ab. Das Web, wie wir es kennen, wäre am Ende.

Mit Snapchat gibt es bereits heute eine Anwendung, die ausschließlich als App gedacht ist und keinerlei Schnittstellen nach außen besitzt. Auch Instagram ist über das Web nur rudimentär zu nutzen. Der ganze Spaß steht nur über die App zur Verfügung.

Natürlich ist eine solche Situation aus Sicht der Betreiber nicht nur nicht zu beklagen, sondern im Gegenteil überaus erstrebenswert. Schließlich bleibt so die Verweildauer auf dem eigenen Angebot gleichbleibend hoch. Bouncerates spielen genauso wenig eine Rolle wie Suchmaschinenoptimierung und andere Problemfelder, mit denen sich Betreiber auseinandersetzen müssen, wenn sie im offenen Wettbewerb mit Anbietern stehen, die jeweils nur einen Klick entfernt sind.

Für Designschaffende, Endnutzer und all jene Seitenbetreiber, die nicht die Reichweite von Facebook oder Snapchat haben, ist die Entwicklung hingegen ebenso gefährlich, wie sie es für den anderen Web-Riesen namens Google ist. Das ist gut für uns alle, denn nur mit der aktiven Förderung offener Standards kann Google den Trend stoppen. Ohne den blauen Konkurrenten würde Google wohlmöglich ebenfalls geneigt sein, sich einen komfortablen Garten anzulegen, der mit einer schicken Mauer nach außen abschließt.

Hier sehen wir ein gutes Beispiel dafür, dass Konkurrenz das Geschäft belebt. Facebook braucht kein offenes Netz, da sich das gesamte Leben innerhalb des Dienstes abspielt. Google lebt von seinem Anzeigengeschäft im offenen Netz. Kein anderes Geschäftsfeld bringt dem Konzern Gewinne. Niemals darf Google daher riskieren, dass sich das offene Netz schließt.

Wider die native App: Web-Apps stehen für das offene Web

Auf der untersten Ebene eines möglichen Konsenses dürfen wir als Web alles verstehen, was eine linkbare URL besitzt und über diese aufgerufen werden kann. Mit dem Erstarken der mobilen Plattformen ging der Designtrend hin zu Mobilität in der Gestaltung. Die Besonderheiten eines Smartphones wurden auf unterschiedliche Weise im Prozess berücksichtigt.

Heute gilt das sogenannte responsive Design als der Weg der Wahl. Dieser Ansatz stellt sicher, dass eine Website auf den diversen mobilen Geräten jeweils so präsentiert wird, wie es den Beschränkungen des Gerätes entspricht, ohne dass die Website zu sehr an Funktionalität verliert. Wenn wir ehrlich sind, ist dieser responsive Designansatz in der Mehrzahl der Fälle ein Kompromiss.

PWA basieren auf offenen Webstandards. Aktuell werden React und Angular gern in der Entwicklung eingesetzt. (Illustration: Pixabay)

Im Vergleich zu nativen Apps konnten mobile Web-Apps lange Zeit funktional nicht mithalten. Zwar ließ sich die Optik einigermaßen gut angepasst auf den mobilen Bildschirm bringen, sobald jedoch Zugriff auf Gerätefeatures, wie die Kamera oder diverse Sensoren, gefragt war, kam unabdingbar die native App ins Spiel.

Natürlich begannen die Probleme nicht erst an diesen Schnittstellen. Schon das Verhalten unter schlechten Internetbedingungen oder gar vollkommenen Funkversagens führte zur Unbedienbarkeit der Web-App.

Progressive Web Apps wollen genau da ansetzen.

Progressive Web Apps sind das Beste beider Welten

Unter dem Eindruck der Erkenntnis, dass auch Google großen Wert auf die Erhaltung des offenen Web legen muss, erscheint es geradezu logisch, dass sich die Kalifornier massiv an der Durchsetzung des Konzeptes der Progressive Web Apps beteiligen. Diese finanzstarke Unterstützung sollten wir begrüßen. Denn so bleiben uns zweifelsfrei bestehende Isolationstendenzen seitens Facebook und Co. voraussichtlich noch auf lange Sicht erspart.

Die Progressive Web App ist ein Konzept, das die Stärken beider Welten, nämlich der der nativen Entwicklung für Mobilgeräte und der der Entwicklung auf der Basis offener Webstandards, verbindet und vereint.

Eine Progressive Web App ist eine aufgebohrte Version bisher schon existierender mobiler Websites. Aufgebohrt in diesem Sinne bedeutet, dass sie über Features und Fähigkeiten verfügt, die man bislang nur aus dem Bereich der nativen Entwicklung kannte. Diese neue Generation von Web-Apps ist also in der Lage, viele der Fähigkeiten heutiger Mobil-Apps zu bieten, so dass derlei native Apps in weiten Teilen unnötig werden.

Na ja, könntest du jetzt einwenden. Wenn die neue Generation von Web-Apps nur die Fähigkeiten bereits existierender nativer Apps zu bieten hat, wieso sollten wir dann darauf setzen? Die Antwort darauf hat mehrere Facetten.

Zum einen wies ich bereits darauf hin, dass es für uns alle negative Folgen haben wird, sollten wir uns vom offenen Web abwenden und uns freiwillig in Walled Gardens einhegen zu lassen. Erinnerst du dich noch an AOL und Compuserve? Da wollen wir doch keinesfalls wieder hin zurück. So betrachtet ist es fast schon eine Frage der Ehre, mindestens aber der Philosophie, die man zu unterstützen bereit ist.

Zum anderen hat eine Web-App natürlich ganz eigene Vorteile. Eine Web-App wird über die Google-Suche gefunden und kann aufgerufen und genutzt werden. Es ist nicht erforderlich, sie in einem der App-Stores zu lokalisieren und von dort zu installieren. Web-Apps müssen nicht für jedes Update erneut durch die Prozesse des App-Stores laufen und dann zumeist umfangreich als Update installiert werden.

Progressive Web Apps vereinen nun die Vorteile nativer Apps hinsichtlich der Schnittstellennutzung, der lokalen Datenhaltung, der Möglichkeit, Benachrichtigungen einzublenden und einige Details mehr, mit der unkomplizierten schnellen Verfügbarkeit webbasierender Angebote und deren unmittelbare Aktualität, die keiner Updateprozesse bedarf.

Der Unterschied zwischen Web-App und Progressive Web App

Eine auf den kleinen Bildschirm eines Mobilgerätes optimierte Web-Ansicht ist die kleinste Version einer Web-App. Im Grunde ist es lediglich eine mobil zu konsumierende Website, die dabei mehr oder weniger nach App aussieht. Die Optik an Apps zu orientieren, ist dabei durchaus ratsam, wenn man sich an den Klassiker „Don’t make me think” von Steve Krug erinnert.

Apps haben unseren Alltag fest im Griff. (Illustration: Pixabay)

Die Komponenten einer Progressive Web App

Die Progressive Web App geht ein paar Schritte weiter. Sie ist darauf ausgelegt, möglichst viele, wenn nicht alle geräte- und browserspezifischen Features nutzbar zu machen. Dies geschieht progressiv.

Application Shell

Das bedeutet, dass die App im Kern erstmal eine mobile Ansicht einer URL zeigt und dann auf die Fähigkeiten des aufrufenden Gerätes und Browsers reagiert. Auf diese Weise bleibt sichergestellt, dass eine Progressive Web App ganz grundsätzlich auf jedem Gerät und Browser funktioniert, allerdings in unterschiedlichem Umfang, eben progressiv angepasst an die aufrufende Umgebung.

Optisch orientiert sich die Progressive Web App dabei an den Designstandards nativer Apps. Im Idealfall erkennt der Nutzer den Unterschied in der Bedienung nicht. Die sogenannte App Shell, also das Grundgerüst oder der äußere Rahmen für die dynamischen Inhalte, wird dabei so angelegt, dass sie sich nach dem ersten Aufruf in den Gerätecache legt und fortan ohne Verzögerungen von dort aus aufgerufen werden kann.

Service Workers

Das Herzstück einer Progressive Web App sind die Service Workers, die fortgeschrittene Funktionalitäten erst möglich machen. Ein Service Worker ist – verkürzt gesagt – ein JavaScript, das, anders als bislang möglich, im Hintergrund einer Webanwendung arbeiten kann. Das funktioniert sogar dann, wenn die Website gar nicht geöffnet ist.

Einer der offensichtlichsten Anwendungsfälle für einen Service Worker ist das Cachen von Inhalten im Hintergrund. Das kann zum einen den Grund haben, dass stets frische Inhalte ohne Ladepausen verfügbar sein sollen oder den, dass eine Web-App auch dann funktionieren muss, wenn gerade keine Verbindung zum Netz besteht.

Du kannst über einen Service Worker aber, um im Beispiel zu bleiben, nicht nur Inhalte speichern lassen, sondern auch nach Fällen unterscheiden, also schlussendlich programmlogische Abläufe starten, die in unterschiedlichen Abhängigkeiten zu unterschiedlichen Ergebnissen führen. Damit wirst du sehr flexibel in den Reaktionsmöglichkeiten deiner App.

Da Service Worker keine Optik haben, ist es sinnvoll, sich einen Fundus an Script-Schnipseln anzulegen, die diverse Basisfunktionalitäten abdecken. Solche „Rezepte” findest du etwa im Service Worker Cookbook von Mozilla oder in der Awesome List Awesome Service Workers.

Der erste Anwendungsfall, den du ganz sicher abdecken willst, ist die Anzeige eines sinnvollen Angebots bei Nichtbestehen einer Internetverbindung anstelle der generischen „You are offline”-Fehlerseite. Je nach Anwendung ist es sogar möglich, den Nutzer gar nicht auf die fehlende Netzverbindung aufmerksam zu machen, solange sie nicht zwingend zur sinnvollen Verwendung erforderlich ist.

Service Worker setzen HTTPS voraus, was die gesamte Anwendung sicherer macht.

Web App Manifest

Um das Nutzererlebnis noch näher an das einer nativen App anzulehnen, ist es ratsam, deine Progressive Web App zur Installation anzubieten. Dazu hinterlegst du eine JSON-Datei, die als Web App Manifest bezeichnet wird.

Damit erreichst du, dass der Nutzer in die Lage versetzt wird, deine App auf seinem Gerät zu installieren. Tatsächlich wird nicht nur ein Shortcut angelegt, wie man das bislang kannte. Vielmehr führt das Manifest zunächst mal dazu, dass dem Besucher ein Installationsbanner angezeigt wird. Dieses Banner kennst du bereits, bloß eben bisher lediglich versehen mit der Aufforderung, eine native App zu installieren.

Ausriss aus dem Beispiel-Manifest auf MDN. (Screenshot: Dr. Web)

Zudem kannst du festlegen, dass die App im Standalone-Modus geöffnet wird, also ohne den ausführenden Browser rund um die App anzuzeigen. Ein Icon weist du ebenfalls einfach zu. Mit entsprechend konfiguriertem Service Worker legst du bei der Gelegenheit gleich mindestens die App Shell auf dem Gerät ab.

Ebenso finden sich die so aufgerufenen Apps in der Übersicht der laufenden Anwendungen des mobilen OS als individuelle Anwendungen, nicht etwa kumuliert in einer Browserinstanz wieder.

Push Notifications

Über die Push-API kannst du den Verwendern deiner App sogar dann Benachrichtigungen aufs Display senden, wenn sie deine App zu diesem Zeitpunkt gar nicht verwenden. So ist es möglich, die Interaktionsrate mit deiner App proaktiv zu steigern. Push Notifications kommen allerdings nur mit Zustimmung der Nutzer aufs Display.

Progressive Web Apps: Zusammenstellung unter PWA Rocks (Screenshot: Dr. Web)

Der Haken ist die Browserunterstützung

Wie stets im modernen Web ist es auch hinsichtlich dieses Themas so, dass Progressive Web Apps nicht vollumfänglich in allen Browsern funktionieren. Auf Apple-Geräten läuft zwar die Web-App, aber durch den fehlenden Support, vor allem für Service Worker, kann man das Erlebnis nicht progressiv nennen. Auch die Push-API werden wir wohl eher nicht auf Apple-Geräten sehen.

Progressive Web Apps sind zum jetzigen Zeitpunkt, also Ende Februar/Anfang März 2018, nur unter Android voll funktionsfähig. Schon seit August 2017 wird jedoch an der Implementation der Service Worker in WebKit gearbeitet. WebKit ist die Technologie, auf der Safari und Mobile Safari basieren. Nun soll es also mit Safari 11.1 auf dem Desktop und mobilen Geräten so weit sein. Wie gesagt, erwarte hier nicht die volle Implementation als PWA. Lediglich Service Workers stellt Safari 11.1 zur Verfügung. Manifest, App Shell und Push Notifications, die anderen gut zwei Drittel der PWA-Technologiebasis, bleiben außen vor.

Kommen wir zum Wettbewerber aus Redmond. Microsoft hat sich ebenfalls zu offenen Standards bekannt und Anfang Februar 2018 angekündigt, den PWA-Standard aus der bisherigen Preview der Rendering-Engine EdgeHTML in den Live-Betrieb zu überführen. Mit EdgeHTML 17 soll PWA vollumfänglich bei Windows-Nutzern im Edge-Browser ankommen. Zur zeitlichen Einordnung sei gesagt, dass EdgeHTML 16 Teil des Fall Creators Updates war. Da Microsoft keinen verlässlichen Update-Rhythmus für EdgeHTML pflegt, können wir die Version 17 vielleicht im April 2018, vielleicht auch erst im Spätsommer des Jahres erwarten.

Zusätzlich zur Integration in Edge haben sich die Redmonder dazu entschlossen, PWA direkt aus dem Microsoft Store zugänglich zu machen, ihnen also den Status von echten Windows-Apps zu verleihen. Entwickler können künftig PWA manuell in den Microsoft Store stellen. Zudem soll der Bing-Crawler auf seinen Streiftouren gefundene, hochwertige PWA automatisch in den Store integrieren können. Laut Microsoft übt Bing schon seit gut einem Jahr den Umgang mit dem Indexieren von PWA.

Mit dem PWA Builder geht man bei Microsoft noch einen Schritt weiter und bietet einen kostenlosen PWA-Generator als Open-Source-Projekt. Du startest den Weg zur PWA mit der Eingabe der URL deiner Website. Der Generator stellt die Lücken fest, die es für die Definition als PWA noch zu schließen gilt und unterstützt dich im Prozess.

Über PWA-Support in Chrome, Firefox und Opera kannst du dich natürlich überdies noch freuen. Willst du dir einen Eindruck vom bisherigen PWA-Angebot verschaffen, dann schau mal in den weiter oben bereits erwähnten Katalog namens PWA Rocks.

Die unterstützten Features auf einem Rechner mit Windows 10 Creators Update und dem Firefox 58.0.2 64-Bit (Screenshot: Dr. Web)

Um eindrucksvoll zu sehen, was welcher Browser bereits zum jetzigen Zeitpunkt bietet, empfehle ich dir den Einsatz der Website What Web Can Do Today, die übrigens ihrerseits eine PWA ist. Du kannst sie von jedem Browser auf jedem Gerät aus aufrufen und erhältst präzise Informationen darüber, welche Features deine App auf dem untersuchten Browser/Gerät nutzen könnte.

TLDR

Progressive Web Apps sind Websites, die sich progressiv an die Fähigkeiten des sie nutzenden Gerätes und Browsers anpassen. Progressiv bedeutet dabei, dass die App umso leistungsfähiger wird, je leistungsfähiger das Gerät, respektive der Browser, mit dem sie aufgerufen wird, sind. Zur Erstellung werden ausschließlich offene Webstandards verwendet.

Im Verlauf des Jahres 2018 ist damit zu rechnen, dass sich das Konzept über alle Plattformen weitgehend identisch durchsetzen wird. Aufgrund der bekannten geschäftspolitischen Erwägungen seitens des Hauses Apple (Stichwort: Walled Garden) dürfte es unter macOS und iOS zu den größten Einschränkungen kommen, während anderswo flächendeckend PWA zum Standard werden dürften.

Weitere Informationen aus dem Weltennetz

  • Progressive Web Apps | Google Developers
  • Welcoming Progressive Web Apps to Microsoft Edge and Windows 10 | Edge Developer Blog
  • Welcoming PWAs: Apple now supports service workers on Safari | Betanews
  • An introduction to Progressive Web Apps | freeCodeCamp
  • Große Übersicht bereits nutzbarer PWA | PWA Rocks
  • The 5 best tools for building progressive web apps fast | TechBeacon

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

3 Kommentare

  1. Danke für diesen Artikel plus Ressosurcen!
    Der Link zum pwabuilder funktioniert nicht, es reicht der folgende: https://www.pwabuilder.com

  2. Es gibt einen großen Unterschied zwischen „Responsive Design“ und „Responsive Webdesign“.

    Siehe: https://de.wikipedia.org/wiki/Responsive_Design

    Das sollte beachtet werden ;-)

Schreibe einen Kommentar zu Dieter Petereit Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück