Was sind „Service Worker“ und wie funktionieren sie?

Ein Service Worker ist ein Javascript-Prozess, der im Browser-Hintergund läuft.
Dort fungiert der Service Worker als eine Art Proxy zwischen der Webseite und dem Internet und kann Netzwerkanfragen abfangen und manipulieren.

Service Worker - vereinfachte darstellung

Service Worker haben (fast) „nur“ Einfluss auf die angefragten Dateien der Webseite. So können JS- und CSS-Dateien zum Beispiel direkt aus einem Cache ausliefert werden, auch wenn der Server andere Header ausgibt.
Auch kann ein Service Worker bei der Anfrage einer zweiten Seite einer Paginierung das gespeicherte HTML der ersten Seite zurückgeben und dort nur die Produkte austauschen. Die Daten der Produkte können dann über einen kleineren, schnelleren Ajax-Call durch den Service Worker angefragt werden.

Eine weitere Möglichkeit ist statt einem Originalbild bei mobilen Endgeräten eine optimierte Version vom Server unter der gleichen Bild-URL zurückzuliefern.

Beispiel für einen Service Worker

Zur Veranschaulichung haben wir eine kleine Service-Worker-Testseite angelegt:

Hier wird einmal die Datei /cat1.png angefragt. Beim Erstaufruf, bevor der Service Worker aktiv ist, wird dort eine Katze angezeigt. Beim zweiten Aufruf der Seite erhaltet ihr für die gleiche Bild-URL das Einhorn, da der Service Worker dann im Browser aktiv ist.

Als zweites Bild wird dieselbe Datei mit Parameter /cat1.png?2 aufgerufen. Wir waten aber vor dem Aufruf auf die Aktivierung des Service Workers. Daher wird hier immer das Einhorn angezeigt.

Wenn man in den Quelltext sieht wird die geladene URL nicht geändert – sonder nur deren Inhalt.

Erst bei einem komplett neuen Aufruf im Incognito-Modus (komplett schließen und neu öffnen) seht ihr wieder das Verhalten aus dem ersten Aufruf.

Wofür werden Service Worker eingesetzt?

Die Einsatzbereiche für Service Worker sind vielfältig. Die häufigsten Einsatzbereiche sind:

  • Speicherung von Inhalten um sie offline Verfügbar zu machen (z.B. im Rahmen einer PWA)
  • Optimierung von Ladezeiten
  • Empfangen von Push-Nachrichten

Ab wann sind Service Worker aktiv?

Service Worker werden per Javascript installiert. Beim dem ersten Request auf eine Domain (wirklich der erste, die Domain darf vorher noch nicht aufgerufen worden sein) können sie also nicht aktiv sein. Sobald der Service Worker installiert wurde ist er bei weiteren Aufrufen der Domain verfügbar.

Es gibt hier zusätzlich noch die Möglichkeit (die wir auch im Beispiel genutzt haben), dass Service Worker bereits beim ersten Aufruf einer Seite Assets beeinflussen können, nachdem sie aktiviert wurden.

Wie finde ich heraus, ob ein Service Worker aktiv ist?

In den Google Chrome Developer Tools unter Application->Service Workers seht ihr die aktiven Service Worker:

Und im Netzwerk-Bereich könnt ihr anhand von kleinen Zahnrädern die Requests finden, die durch einen Service Worker ausgelöst wurden:

Wie geht Google mit Service Workern um?

Wir haben unsere Testseite mithilfe der URL-Prüfung einmal von Google rendern lassen. Auch wenn der Check von modernizr.com sagt, dass der Browser Service Worker unterstützt, wurde der Service Worker nicht installiert oder aktiviert. Auch konnten wir keinen Zugriff vom Googlebot auf das JS-File des Service Workers feststellen.

Man kann also davon ausgehen, dass Googlebot aktuell (noch) keine Service Worker unterstützt.

Welchen Einfluss haben dann Service Worker auf die Arbeit eines SEOs?

Mit Service Workern können (ab dem zweiten Aufruf) im Hintergrund Änderungen am HTML der aufgerufenen Seite durchgeführt werden. Zum Beispiel können aus Caching-Gründen Title Tags, Canonicals oder Robots Tags entfernt oder geändert werden. Wenn man dann den Quelltext der Seite aufruft, sieht es so aus, als wäre das entsprechend in der Antwort vom Server so gewesen. Google sieht hier aber etwas komplett anderes.

Auch hat Martin Splitt von Google auf der “Better Together”-Konferenz von Ryte von einem Problemfall berichtet, bei dem die komplette Seite ohne Service Worker nicht funktionierte. Mehr Informationen dazu in einem Blog Post von Demir Jasarevic

Helfen kann man sich, indem man die Seite im „frischen“ Incognito-Modus aufruft und prüft, oder während einer Prüfung Service Worker per Chrome Extension deaktiviert.

Weiterführende Ressourcen zu Service Workern

Google Developer Web fundamentals – Service Worker

Michael Weber

Author Michael Weber

Michael Weber ist der Gründer und Hauptentwickler von searchVIU. Er betreibt seit 2001 SEO und hat Erfahrungen als Berater in einer Agentur und als Inhouse-SEO gesammelt.

More posts by Michael Weber

Leave a Reply