Um meinen HTML5Podcatcher offline verfügbar zu machen habe ich damals auf die Technik des AppCache zurückgegriffen. Da diese Technik sich im allgemeinen als unzureichend erwies und mir Ärger bereitet hat, bin ich nach langer Zeit zu einem Service Worker übergegangen.

Service Worker als Netzwerk-Proxy und Cache

Service Worker stellen verschiedene Funktionen bereit, die Kernfunktionalität ist aber wohl das bereitstellen von Ressourcen einer Webapp, selbst dann, wenn das Gerät offline ist. Im Gegensatz zum sehr deklarativen Ansatz des AppCaches muss man dabei aber alles selbst machen. Dazu erstellt man eine Javascript-Datei die verschiedene Event-Listener implementiert. Der Clou ist dabei, das jedesmal wenn die zum Service Worker gehörende App auf das Internet zugreifen möchte, dieser Request an den Service Worker übergeben wird anstatt ihn direkt auszuführen. Dazu wird durch den Browser ein Fetch-Event ausgelöst dass dann im Service Worker verarbeitet wird. Dabei kann der Request verändert werden, mit vorhandenen Caches abgeglichen oder sonstige Aktivitäten durchgeführt werden.

Um das Ziel der Offlineverfügbarkeit zu gewährleisten gibt zusätzlich eine neue Art von Cache. Der Cache Storage ist ein Key-Value-Store. Die Keys sind dabei Request-Objekte und die Werte die zugehörigen Responses. Eine ganze Reihe von Möglichkeiten Anforderungen an die Verfügbarkeit und Aktualität zu genügen gibt es im Offline Cookebook von Jake Archibald.

Lifecycle

Oben hatte ich ja gesagt das ein Service Worker verschiedene Eventlistener implementiert. Einige hängen mit dem Lebenszyklus von Workern zusammen. In diesen kann man schon mal die Caches vorbeifüllen oder Updates von einer IndexDB machen. Auch zum Lebenszyklus hat Jake Archibald wieder gute Informationen zusammengestellt.

Kommunikation

Wenn man den Bedarf hat zwischen der Webseite und dem Service Worker (oder umgekehrt) Nachrichten auszutauschen kann man hierfür Message Chanels nutzen. Wie das geht hat diesmal Craig Russell in seinem Artikel How to Send Messages Between Service Workers and Clients aufgeschrieben.

Push Notifications

Ein Feature von Service Workern das ich nicht nutze: Sie ermöglichen es Push Notifications zu empfangen. Wer hier mehr wissen will muss aber selber recherchieren.

Probleme

Alles in allem bin ich recht zufrieden. Lediglich Firefox unter Android vermisst mir etwas den Tag. Seit ich den Service Worker einsetze zeigt mir dieser Browser keine Favicons mehr an. Bislang konnte ich auch noch nicht herausfinden was das soll.

Schlussbemerkung

Entgegen meiner sonstigen Gewohnheit enthält dieser Artikel keinen Code. Wenn du möchtest das ich einen bestimmten Aspekt näher beleuchte, schreib mir doch bitte einen Kommentar oder eine e-Mail. Wer einen Blick auf meinen konkreten Service Worker werfen will kann das auf Github tun.