Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 2. Januar 2018

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

PWA, Progressive Web Apps, set­zen sich nur dann als Standard gegen die nati­ven Mobil-Apps durch, wenn sie mög­lichst brei­te Unterstützung fin­den. Dabei kann jede Web-App eine pro­gres­si­ve Web-App sein.

Was ist eine Progressive Web App?

Progressive Web Apps, eben noch in unse­rer 2018er Übersicht zum Trend erho­ben, sind mobil nutz­ba­re Webangebote, die sich an die Fähigkeiten des sie nut­zen­den Gerätes und Browsers anpas­sen kön­nen. Je leis­tungs­fä­hi­ger das Gerät und der Browser, des­to leis­tungs­fä­hi­ger die App. Zur Erstellung wer­den aus­schließ­lich offe­ne Webstandards ver­wen­det. Progressive Web Apps kön­nen aber der­zeit noch nicht auf alle Gerätefunktionen zugrei­fen, wes­halb sie für man­che Anwendungsfälle unge­eig­net sind.

Die mobi­le Nutztung des Web wächst ste­tig. (Foto: Stocksnap)

Im Grunde sind PWA also zunächst ein­mal Websites. Es ist dei­ne Entscheidung, ob du aus dei­ner nor­ma­len Website eine pro­gres­siv arbei­ten­de machst, denn eine PWA ist nichts ande­res als eine auf­ge­bohr­te Version bis­her schon exis­tie­ren­der Websites, die mobil funk­tio­nie­ren. Aufgebohrt in die­sem Sinne bedeu­tet, dass sie über Features und Fähigkeiten ver­fügt, die man bis­lang nur aus dem Bereich der nati­ven Entwicklung kann­te. Diese neue Generation von Web-Apps ist also in der Lage, vie­le der Fähigkeiten heu­ti­ger Mobilapps zu bie­ten, so dass letz­te­re in wei­ten Teilen unnö­tig wer­den.

Abgesehen davon, dass man mit einer PWA im Vergleich zu einer nati­ven App das Web wie­der ein Stück offe­ner und frei­er macht, hat eine Web-App natür­lich ganz eige­ne Vorteile. Eine Web-App wird über die Google-Suche gefun­den und kann auf­ge­ru­fen und genutzt wer­den. Es ist nicht erfor­der­lich, sie in einem der App-Stores zu loka­li­sie­ren und von dort zu instal­lie­ren. Web-Apps müs­sen nicht für jedes Update erneut durch die Prozesse des App-Stores lau­fen und dann zumeist umfang­reich als Update instal­liert wer­den.

PWA ver­ei­nen also die Vorteile nati­ver Apps hin­sicht­lich der Schnittstellennutzung, der loka­len Datenhaltung, der Möglichkeit, Benachrichtigungen ein­zu­blen­den und eini­ge Details mehr, mit der unkom­pli­zier­ten schnel­len Verfügbarkeit web-basie­ren­der Angebote und deren unmit­tel­ba­re Aktualität, die kei­ner Updateprozesse bedarf.

Das Wörtchen “pro­gres­siv” im Namen bedeu­tet, dass die App im Kern erst­mal eine mobi­le Ansicht einer URL zeigt und dann auf die Fähigkeiten des auf­ru­fen­den Gerätes und Browsers reagiert. Auf die­se Weise bleibt sicher­ge­stellt, dass eine Progressive Web App ganz grund­sätz­lich auf jedem Gerät und Browser funk­tio­niert, aller­dings in unter­schied­li­chem Umfang, eben pro­gres­siv ange­passt an die auf­ru­fen­de Umgebung.

Service Worker to the Rescue

Herzstück jeder PWA sind die Service Workers, die fort­ge­schrit­te­ne Funktionalitäten erst mög­lich machen. Ein Service Worker ist – ver­kürzt gesagt – ein JavaScript, das, anders als bis­lang mög­lich, im Hintergrund einer Webanwendung arbei­ten kann. Das funk­tio­niert sogar dann, wenn die Website gar nicht geöff­net ist.

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

Da Service Worker kei­ne Optik haben, ist es sinn­voll, sich einen Fundus an Scripten anzu­le­gen, die diver­se Basisfunktionalitäten abde­cken. Solche Rezepte fin­dest du etwa im Service Worker Cookbook von Mozilla, das inzwi­schen ein erheb­li­ches Repertoire an Standard-Funktionalitäten abzu­de­cken weiß.

Dazu gehö­ren vor allem Features, über die jede PWA ver­fü­gen muss, wie etwa das Cachen von Daten oder Fallback-Techniken bei nicht bestehen­der Online-Verbindung. Alle Rezepte des Cookbook sind aus der Tüte ver­wend­bar, dabei aber über­aus aus­führ­lich doku­men­tiert. Die Demos sind so ange­legt, dass die Firefox Entwicklertools eben­falls nütz­li­che Informationen preis­ge­ben, wenn du sie par­al­lel zur Demo lau­fen lässt.

Willst du dich zunächst inten­si­ver mit den Grundlagen aus­ein­an­der­set­zen, bie­tet sich die klei­ne Übersicht zu Lernressourcen namens Awesome Service Workers an. Am 19. Dezember 2017 brach­te Microsoft Service Workers in einem Windows-Update zum Edge-Browser. Die Redmonder gehen damit davon aus, dass PWA weit­aus stär­ker als bis­her in Windows 10 eine Rolle spie­len wer­den. 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.

2 Kommentare

  1. Am 19. Dezember 2018 brach­te Microsoft Service Workers — soll­te wohl 2017 heis­sen!!!

    Alles Gute zum Neuen Jahr, Kommentar kann nach­her wie­der gelöscht wer­den!!

Schreibe einen Kommentar

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