Dieter Petereit 2. Januar 2018

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.

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.

2 Kommentare

  1. Am 19. Dezember 2018 brachte Microsoft Service Workers — sollte wohl 2017 heissen!!!

    Alles Gute zum Neuen Jahr, Kommentar kann nachher wieder gelöscht werden!!

Schreibe einen Kommentar

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