Progressive Web App — Grundkonzept und Kerntechnologien #1

Dieser Text ist original hier veröffentlicht: Mein Blogbeitrag

“person holding space gray iPhone X” by Yura Fresh on Unsplash

Der Gedanke hinter der Progressive Web App ist nicht neu, wurde aber erstmals 2016 vom Polymer Team auf der Entwicklerkonferenz Google I/O benannt. Doch was steckt hinter dem Trendbegriff der letzten drei Jahre und warum sollten Entwickler dem neuartigen Konzept zukünftig mehr Aufmerksamkeit widmen? Im Zuge einer wissenschaftlichen Arbeit habe ich mich eingehend mit dem Thema befasst und möchte in dieser Beitragsreihe mein Wissen über das Grundkonzept PWA sowie dessen Kerntechnologien mit euch teilen.

Smartphone & Tablet

In Deutschland verbringen Benutzer von Smartphone und Tablet 90% ihrer Zeit in Apps und nur 10% im Web. Eigentlich kein gutes Vorzeichen für ein neuartiges Konzept der Web App. Bei den regelmäßig genutzten nativen Apps handelt es sich in der Regel jedoch um lediglich fünf verschiedene Anwendungen pro Benutzer. Im Web hingegen bewegen sich die Benutzer deutlich flexibler und besuchen wesentlich mehr Websites. Vergleicht man die meist besuchten mobilen Websites mit den meist genutzten nativen Apps, liegen die Websites mit dreimal so vielen Benutzern deutlich vor den nativen Anwendungen. Obwohl das mobile Web heute noch deutlich zu langsam ist, wird es trotz Performance-Einbußen regelmäßig genutzt. An dieser Stelle soll das Konzept der PWA mit neuartigen Technologien Abhilfe schaffen und die Performance sowie die User Experience (UX) bei der Nutzung einer Web App bedeutend verbessern.

Kennzeichen

Zu Beginn sei festzuhalten, dass es sich bei einer PWA weder um ein neues Framework noch um eine einzige, bestimmte Technologie handelt. Vielmehr zeichnet sich das Konzept durch eine Sammlung verschiedener Strategien, neuartiger Technologien und APIs aus. Mit Hilfe dieser Sammlung sollen Entwickler dem Benutzer eine App-ähnliche Erfahrung im Web bieten. Der große Vorteil? Im Gegensatz zur nativen App lässt sich durch die plattformunabhängige Entwicklung eine große Anzahl Benutzer mit nur einer globalen Anwendung erreichen. Native Apps hingegen müssen für unterschiedliche Betriebssysteme mit plattformabhängigen SDKs (Software Development Kit) entwickelt und im jeweiligen App Store bereitgestellt werden. Um einen sichtbaren Mehrwert in Performance und UX zu erhalten, beschreibt Google folgende zentrale Kennzeichen:

  • Reliable — schnelle Ladezeiten auch bei unzuverlässigen Netzwerkverbindungen oder älteren Endgeräten
  • Fast — Interaktion in wenigen Sekunden mit sanften Animationen und ohne lästiges Ruckeln
  • Engaging — App-ähnliche Erfahrung mit Home-Bildschirm Installation, Splash Screen und Push Benachrichtigungen, selbst wenn der Browser nicht geöffnet ist

Soweit so gut. Doch wie kann eine PWA realisiert werden? Wie bereits eingangs erwähnt ist die PWA kein neues Framework und beinhaltet auch keine neue oder neuartige Programmiersprache, im Gegenteil. Mit gängigen Webtechnologien wie HTML, CSS und JavaScript können Entwickler eine qualitativ hochwertige PWA mit neuartigen Features und Möglichkeiten implementieren. Eines dieser wegweisenden Features ist die Offline-Funktionalität. Unabhängig vom Standort, Endgerät oder Browser kann die PWA geöffnet und dank Service Worker und Caching sogar offline verwendet werden. Zudem lässt sich die UX mit Home-Bildschirm Installation und einem Splash Screen beim Start der Web App verbessern. Um das Konzept sowie grundlegende Technologien der PWA auf Real-Welt-Projekte anzuwenden, bedarf es minimaler Anforderungen an die System-Umgebung. Diese lassen sich wie folgt beschreiben:

  • Sichere Verbindung über HTTPS
  • Web App Manifest zur vollständigen Kontrolle der UX, Sprache, Startseite u.v.m.
  • Netzwerkunabhängige Verfügbarkeit sowie schnelles Laden z.B. durch Service Worker Caching
  • Vollständige Funktionalität auf allen Endgeräten durch Responsive Design
  • Cross Browser — Funktionalität in allen Browsern und auf allen Endgeräten
  • Deep Linking — Einzigartige URL für jede Seite (z.B. für Marketingzwecke)

Zusätzliche Anforderungen sind abhängig von der Art der Web App sowie dem Verwendungszweck. Weitere grundlegende Anforderungen an eine PWA finden sich in der PWA Checklist von Google.

Hindernisse & Voraussetzungen

Aktuell gibt es einige Hindernisse, die die Reife des Konzepts blockieren. Das Hauptproblem dabei ist der Browser Support. Nicht jeder der fünf großen Browser Hersteller unterstützt neue Technologien unmittelbar. Eine der bedeutendsten Neuheiten, der Service Worker, der unter anderem die Offline-Funktionalität und Push-Benachrichtigungen ermöglicht, wird Stand 04.07.2018 von allen großen Browsern in der aktuellen Version unterstützt.

Browser Support Service Workers — Quelle: caniuse.com 04.07.2018

Lediglich der Internet Explorer unterstützt diese Technologie nicht. Dies wird sich auf Grund des eingestellten Supports seitens Microsoft in Zukunft auch nicht ändern. Der IE 11 stellt die letzte Version des Browser dar und wir nur rudimentär mit Updates versehen. Da Google sich sehr intensiv mit dem Konzept der PWAs beschäftigt, bietet Chrome ohne Zweifel die beste Unterstützung aller benötigten Features. Firefox und Opera folgen und haben bereits viele Features implementiert. Zu den Wichtigsten gehören neben dem Service Worker unter anderen die Push API und Notification API, das Web App Manifest und Indexed DB. Welcher Browser welches Feature unterstützt, lässt sich auf www.caniuse.com überprüfen.

Für die eben beschriebenen sowie weiterer Features müssen zudem bestimmte Voraussetzungen erfüllt sein. Die bereits erwähnte PWA-Checklist von Google stellt eine nützliche Sammlung der wichtigsten Grundlagen zur Umsetzung einer PWA dar. Der erste Punkt auf dieser Liste ist dabei zugleich der Wichtigste. Für die Kommunikation zwischen Client und Server ist das HTTPS-Protokoll vorgeschrieben. Technologien wie der Service Worker sind aus Sicherheitsgründen auf HTTPS beschränkt, um u.a. man-in-the-middle Angriffe zu verhindern. Ein weiterer entscheidender Punkt ist die Nutzung der History API. Beliebte Frameworks, wie Vuejs sind ideal für die Erstellung von Single Page Applications (SPAs) und greifen beim Routing auf den hash-mode zurück. Für eine PWA ist jedoch der history-mode erforderlich, da der Browser den Teil der URL hinter dem Hash nicht sendet und Seiten dadurch nicht erreichbar sind.

History Mode beim Routing in SPAs

Neben diesen beiden grundlegenden technischen Voraussetzungen stellt die PWA, wie bereits weiter oben erwähnt, Anforderungen an Design und Layout sowie die User Experience. Die Web App muss mobile-friendly und responsive entwickelt sowie auf allen Endgeräten und Browsern in ihrer Funktionalität gleichermaßen erreichbar sind. Die vollständige PWA-Checklist mit sämtlichen Voraussetzungen findet sich hier.

Ausblick

Im folgenden Beitrag gehe ich auf das PRPL-Pattern, die Application Shell sowie Architekturstile und -modelle ein. Den Abschluss dieser Beitragsreihe bilden die Kerntechnologien Service Worker und Web App Manifest.

tl;dr

Die PWA ist kein neues Framework, kann mit gängigen Webtechnologien realisiert werden, beinhaltet eine Vielzahl neuartiger Technologien wie den Service Worker und das Web App Manifest, setzt bestimmte Mindestanforderungen voraus und sieht sich aktuell kleineren Hindernissen wie fehlendem Browser Support gegenüber.

Quellen

Dieser Text ist original hier veröffentlicht: Mein Blogbeitrag