Tutorial: Progressive Web Apps mit Workbox, Teil 4
Moderne Zeiten
Progressive Web Apps bieten leistungsstarke Funktionen – Offlinefähigkeit und ein eigenes Icon auf dem Home-Bildschirm inklusive. Und Schnittstellen gewähren Zugriff auf native Features, die man dem Web nicht zugetraut hätte.
Progressive Web Apps (PWA) heben Webanwendungen auf eine Ebene mit nativen Applikationen. Das schließt Offlinefähigkeit, Push-Benachrichtigungen, das Synchronisieren von Daten im Hintergrund sowie ein eigenes Symbol auf dem Home-Bildschirm ein. In den vergangenen drei Teilen dieses Tutorials ging es um die PWA-Basistechniken Service Worker und Web App Manifest, mit denen sich diese mächtigen Funktionen umsetzen lassen. Native Apps bieten noch mehr, zum Beispiel:
– Wiedergabe von Multimediainhalten;
– hardwarebeschleunigte 2D-/3D-Visualisierungen;
– flüssige Animationen und Zustandsübergänge;
– diverse Eingabemethoden (Touchpad, Maus, Stift, Gamepad);
– lokale Speichertechniken;
– standortbezogene Dienste;
– Zugriff auf Kamera und Mikrofon.
Glücklicherweise gibt es im Web Schnittstellen für solche Funktionen: Spätestens seit der Entwicklung der Hypertext Markup Language (HTML) in Version 5 rückten Webanwendungen in den Fokus. So führte dieser Sprachstandard Audio- und Videoelemente ein, die Bild und Ton im Browser ohne Plug-in wiedergeben. Cascading Style Sheets (CSS) in Version 3 erlauben Animations und Transitions, die sich hardwarebeschleunigt ausführen lassen und die auch auf Mobilgeräten flüssig funktionieren.
Darüber hinaus existieren zahlreiche moderne Webschnittstellen wie die Gamepad API, mit der man Spiele und andere Multimediaanwendungen via Controller steuert. Die API wird über JavaScript angesprochen. Auch hierfür ist kein spezielles Plug-in notwendig, es genügt das Verbinden eines Controllers mit dem Rechner oder Mobilgerät (eventuell verlangt das Betriebssystem einen Treiber für das Gamepad). Mit der IndexedDB lassen sich auch strukturierte Daten offline zwischenspeichern. Die Geolocation API gewährt Zugriff auf den Standort des Anwenders, die Media Capture and Streams API auf Mikrofon und Kamera. Alle genannten Funktionen sind über eine plattformübergreifend nutzbare Webschnittstelle zu erreichen.
Der Browser sollte aktuell sein
Aktuelle Browser arbeiten mit diesen Schnittstellen zusammen. Bei älteren Modellen ist das nicht immer der Fall. Die Website caniuse.com listet auf, welche APIs auf welchen Plattformen mit welcher Browserversion kompatibel sind. Einen groben Überblick, welche der vier großen Browser (Chrome, Firefox, Safari, Edge) was beherrschen, verschafft der Browser-Score von caniuse.com. Für jede offizielle Webschnittstelle gibt es Punkte (Abbildung 1).
Ein wichtiges Prinzip von PWA ist, dass sie auch auf älteren Browsern nicht abbrechen dürfen, wenn eine moderne Webschnittstelle eingesetzt wird. Das besagt das Prinzip des Progressive Enhancement: Zumindest die Grundfunktionen einer Anwendung sollten auf möglichst vielen Browsern im Rahmen der dort verfügbaren Möglichkeiten laufen. Beispielsweise unterstützt Microsofts Internet Explorer keine Service Worker. Eine Forms-over-Data-PWA funktioniert in diesem Webbrowser zwar nicht offline, das Erfassen von Daten über Formulare ließe sich aber selbst in einem Internet Explorer 9 bewerkstelligen.
Feature Detection stellt die Einhaltung des Prinzips sicher: Zunächst prüft der Entwickler, ob die Schnittstelle, die er verwenden will, überhaupt existiert. In den meisten Fällen geht das über eine einfache Verzweigung, wie sie schon bei der Registrierung des Service Workers in Teil 1 dieses Tutorials zur Sprache kam: