Rezepte für Webentwickler: Deine erste PWA mit dem Service Worker Cookbook

PWA, Progressive Web Apps, setzen sich nur dann als Standard gegen die nativen Mobil-Apps durch, wenn sie möglichst breite Unterstützung finden. Dabei kann jede Web-App eine progressive Web-App sein.

Was ist eine Progressive Web App?

Progressive Web Apps, eben noch in unserer 2018er Übersicht zum Trend erhoben, sind mobil nutzbare Webangebote, die sich an die Fähigkeiten des sie nutzenden Gerätes und Browsers anpassen können. Je leistungsfähiger das Gerät und der Browser, desto leistungsfähiger die App. Zur Erstellung werden ausschließlich offene Webstandards verwendet. Progressive Web Apps können aber derzeit noch nicht auf alle Gerätefunktionen zugreifen, weshalb sie für manche Anwendungsfälle ungeeignet sind.

Die mobile Nutztung des Web wächst stetig. (Foto: Stocksnap)

Im Grunde sind PWA also zunächst einmal Websites. Es ist deine Entscheidung, ob du aus deiner normalen Website eine progressiv arbeitende machst, denn eine PWA ist nichts anderes als eine aufgebohrte Version bisher schon existierender Websites, die mobil funktionieren. 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 Mobilapps zu bieten, so dass letztere in weiten Teilen unnötig werden.

Abgesehen davon, dass man mit einer PWA im Vergleich zu einer nativen App das Web wieder ein Stück offener und freier macht, 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.

PWA vereinen also 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 web-basierender Angebote und deren unmittelbare Aktualität, die keiner Updateprozesse bedarf.

Das Wörtchen „progressiv“ im Namen 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.

Service Worker to the Rescue

Herzstück jeder PWA 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.

Service Workers Cookbook: Landing Page (Screenshot: Dr. Web)

Da Service Worker keine Optik haben, ist es sinnvoll, sich einen Fundus an Scripten anzulegen, die diverse Basisfunktionalitäten abdecken. Solche Rezepte findest du etwa im Service Worker Cookbook von Mozilla, das inzwischen ein erhebliches Repertoire an Standard-Funktionalitäten abzudecken weiß.

Dazu gehören vor allem Features, über die jede PWA verfügen muss, wie etwa das Cachen von Daten oder Fallback-Techniken bei nicht bestehender Online-Verbindung. Alle Rezepte des Cookbook sind aus der Tüte verwendbar, dabei aber überaus ausführlich dokumentiert. Die Demos sind so angelegt, dass die Firefox Entwicklertools ebenfalls nützliche Informationen preisgeben, wenn du sie parallel zur Demo laufen lässt.

Willst du dich zunächst intensiver mit den Grundlagen auseinandersetzen, bietet sich die kleine Übersicht zu Lernressourcen namens Awesome Service Workers an. Am 19. Dezember 2017 brachte Microsoft Service Workers in einem Windows-Update zum Edge-Browser. Die Redmonder gehen damit davon aus, dass PWA weitaus stärker als bisher in Windows 10 eine Rolle spielen werden. Warten wir das mal ab.