Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » JavaScript & jQuery » Service Worker: JavaScript unabhängig von einer Website ausführen

Service Worker: JavaScript unabhängig von einer Website ausführen

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
Lesedauer: 5 Minuten
  • von Denis Potschien
  • 21. August 2015
Bookmarke mich
Share on pocket

ARIT Services GmbH

CAF Webdesign Agentur

Philipp Pistis - WordPress Agentur

Der Informations­designer

Orange Services

aeosys

Neue JavaScript-APIs haben in den letzten Jahren viele neue und nützliche Funktionen hervorgebracht, die vor allem für das mobile Web entwickelt wurden – zum Beispiel die Geolocation-der Application-Cache-API. Von den technischen Möglichkeiten nähern sich Webanwendungen immer mehr nativen Apps für Mobilgeräte an. Eine Sache war bislang jedoch den Apps vorbehalten: Anders als Webanwendungen können Apps auch dann laufen, wenn sie gar nicht geöffnet sind. Mit der neuen Service-Worker-API klappt das nun auch mit JavaScript und somit in Webanwendungen.

serviceworker-teaser_DE

Die Möglichkeiten der Service-Worker-API

Damit JavaScript ausgeführt werden kann, war es bislang immer Voraussetzung, dass eine Website in einem Browser geöffnet war. Mit dem Schließen einer Website – durch Schließen des Browser-Tabs oder -Fensters – wurden auch sämtliche ausgeführten JavaScripts beendet. Die neue Service-Worker-API hingegen erlaubt es, eine JavaScript-Datei auch dann auszuführen, wenn die dazugehörige Website gar nicht geöffnet ist.

Mit Service Workern ist es somit also möglich, Funktionen im Hintergrund auszuführen – auch nach dem Verlassen einer Website. Eine der Einsatzmöglichkeiten der Servive Worker ist das Cachen von Dateien im Hintergrund. Gerade bei der mobilen Nutzung der Internets sind Übertragsungsraten nicht immer gleich gut. Ein Service-Worker-Script hat die Möglichkeit, im Hintergrund neue Inhalte zu laden – bei einer Nachrichtenseite zum Beispiel neue Artikel samt Bilder. Wird die Nachrichtenseite zu einem späteren Zeitpunkt aufgerufen, stehen die Inhalte bereits zur Verfügung.

Die Voraussetzungen

Da die API noch recht neu ist, ist Chrome derzeit der einzige Browser, der die API gut unterstützt und auch Debugging-Möglichkeiten zur Verfügung stellt. Im Firefox lassen sich Servive Worker für Nightly-Builds über „about:config“ aktivieren. Andere Browser unterstützen die API derzeit noch nicht.

Außerdem funktionieren Service Worker ausschließlich über sichere HTTPS-Verbindungen. Das hat in erster Linie Sicherheitsgründe. Denn mit einem im Hintergrund laufenden Service-Worker-Script lässt sich eine Website kontrollieren. Aber es ist ohnehin damit zu rechnen, dass neue APIs, die Zugriff auf sensible Funktionen oder Hardware haben, ausschließlich über HTTPS-Verbindungen laufen werden.

Servive Worker registrieren

Wie bereits erwähnt, handelt es sich bei einem Service Worker um eine von der eigentlichen Website losgelöste JavaScript-Datei, die im Hintergrund – unsichtbar für den Besucher – ausgeführt wird. Diese JavaScript-Datei muss zunächst im Browser registriert werden. Dies geschieht über die „register()“-Methode der Service-Worker-API.

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("service-worker.js").then(
    function(erfolg) {
      console.log("Ja, hat geklappt.", erfolg);
    }
  ).catch(
    function(fehler) {
      console.log("Nein, hat leider nicht geklappt.", fehler);
    }
  );
}

Im Beispiel wird zunächst über eine „if“-Abfrage geprüft, ob der Browser die Service-Worker-API überhaupt unterstützt. Anschließend wird die Datei „service-worker.js“ registriert. Über einen Promise – „then()“ beziehungsweise „catch()“ – wird in der Konsole ausgegeben, ob die Registrierung geklappt hat oder nicht. Versucht man beispielsweise einen Service Worker über eine nicht sichere HTTP-Verbindung zu registrieren, wird der Browser die Registrierung ablehnen und die Fehlermeldung der „catch()“-Methode ausgeben.

Die Service-Worker-Datei hat ab dem Zeitpunkt der Registrierung die Möglichkeit, den Inhalt der Website zu verändern. Allerdings kann man den Zugriff auf bestimmte Verzeichnisse der Website begrenzen. Hierzu wird per „scope“ ein Verzeichnis übergeben.

navigator.serviceWorker.register("service-worker.js", {
  scope: "/verzeichnis/"
})

Im Beispiel hätte das Service-Worker-Script nur Zugriff auf die Inhalte des angegebenen Verzeichnisses – einschließlich seiner Unterverzeichnisse.

Mit Service Workern arbeiten

Nachdem der Service Worker registriert wurde, nimmt das Script – im Beispiel die Datei „service-worker.js“ seine Arbeit auf. Es wird nun vom Browser im Hintergrund ausgeführt. Sobald die Website, über welche der Service Worker registriert wurde, neu geladen wird, hat der Service Worker Zugriff auf die Website und kann die Ausgabe der Website beeinflussen.

Innerhalb der Service-Worker-Datei steht einem nun das „fetch“-Event zur Verfügung. Das „fetch“-Event wird immer dann gestartet, wenn eine Ressource innerhalb des per „scope“ definierten Bereiches abgerufen wurde. Es erlaubt einem, mit der Methode „respondWith()“ mit der Seite zu kommunizieren und einzelne Requests zu überschreiben. Dazu wird ein neuer Response erstellt und der alte dadurch ersetzt.

self.addEventListener("fetch", function(e) {
  e.respondWith(new Response("Das ist ein neuer Inhalt"));
});

Das einfache Beispiel sorgt dafür, dass jeder Request innerhalb des „scope“-Verzeichnisses – sei es ein HTML-Dokument oder eine Grafik – mit dem neuen Response überschrieben wird. Auch komplexe Responses sind möglich. Mit der zusätzlichen Option „headers“ kann man weitere Angaben zur Art des Responses machen.

e.respondWith(new Response("<svg>…</svg>", {
   headers: {
     "Content-Type": "image/svg+xml"
   }
 }));

Im Beispiel eine SVG-Grafik mit entsprechendem Content-Type ausgegeben.

Inhalte laden und an bestimmte Requests ausgeben

Statt mit „Response()“ eigene Inhalte zu bauen, mit denen man bestehende Inhalte überschreibt, hat man auch die Möglichkeit, mit der „fetch()“-Methode Inhalte zu laden.

e.respondWith(
  fetch("https://www.example.com/bild.jpg", {
    mode: "no-cors"
  })
);

Im Beispiel wird von einer externen Domain eine Bilddatei geladen. Die Angabe von „no-cors“ über die Option „mode“ ist notwendig, um das Laden von Inhalten aus externen Quellen zu erlauben.

In den bisherigen Beispielen sind mit „respondWidth()“ immer alle Requests – HTML-Dokumente, Bilder und alles andere, was über eine URL ausgegeben wird – überschrieben worden. Das will man in der Regel natürlich nicht erreichen. Über einfache „if“-Abfragen kann man jedoch bestimmte URLs mit einem eigenen Response überschreiben.

if (e.request.url.indexOf(".jpg") >= 0) {
  e.respondWith(
    fetch("https://www.example.com/bild.jpg", {
      mode: "no-cors"
    })
  );
}

Im Beispiel werden alle Requests, welche die Zeichenkette „.jpg“ beinhalten, mit der extern geladenen Datei „bild.jpg“ überschrieben. Alle anderen Requests bleiben unberührt und geben ihre Inhalte in gewohnter Weise aus.

Debugging im Chrome

Eine Übersicht aller im Browser registrierten Service Worker erhält man über die Eingabe von „chrome://inspect/#service-workers“ in der Adressleiste des Chrome-Browsers. Für jeden Service Worker stehen die Funktionen „inspect“ und „terminate“ zur Verfügung. Chrome vergibt für jeden Service Worker eine Prozess-ID („pid“), die vor der URL des Service-Worker-Scripts angegeben wird. Per „inspect“ wird ein Fenster mit den „Developer Tools“ von Chrome geöffnet. Dort stehen einem die bekannten Debugging-Funktionen zur Verfügung.

serviceworker_chrome
Registrierte Service Worker im Chrime

Über den Punkt „terminate“ wird der jeweilige Service Worker wieder gelöscht.

Cashing mit Service Workern

Die Service Worker sind mit einer eigenen Caching-Funktion ausgestattet, die unabhängig vom „Application Cache“ der HTML5-Caching-API läuft. Über den Service-Worker-Cache lassen sich Dateien, die beispielsweise als Teil einer Webanwendung verfügbar gemacht werden sollen, im Hintergrund herunterladen – auch wenn die Seite zwischenzeitlich verlassen wird.

serviceworker_chrome-dev-tools
„Developer Tools“ für einen Service Worker – mit dem Service-Worker-Cache

Das Cachen von Dateien lässt sich über das „install“-Event der Servive-Worker-API realisieren. Dieses wird nach der Registrierung aufgerufen.

self.addEventListener("install", function(e) {
  e.waitUntil(
    caches.open("mein-cache").then(function(cache) {
      return cache.addAll([
        "webapp.js",
        "webapp.css",
        "wabapp.png"
      ]);
    })
  );
});

Die Methode „waitUntil()“ sorgt dafür, dass andere Events erst gestartet werden, wenn das aktuell laufende beendet wurde. So wird sichergestellt, dass zum Beispiel das „fetch“-Event erst gestartet wird, wenn alle Dateien innerhalb des „install“-Events gecached wurden.

Per „cache.open()“ wird ein Servive-Worker-Cache angelegt. Diesem wird ein individueller Name – im Beispiel „mein-cache“ – gegeben. Anschließend werden per „addAll()“ die Dateien übergeben, die dem Cache hinzugefügt werden sollen.

Da Chrome die Methode „addCache()“ derzeit noch nicht unterstützt, ist ein Polyfill notwendig, welches diese Funktionalität nachrüstet. Anschließend stehen die gecachten Dateien zur Verfügung und werden anstelle der Dateien auf dem Server verwendet. Anders als normaler Cache wird nicht geprüft, ob aktuellere Dateien zur Verfügung stehen.

Fazit

Auch wenn sich die Service-Worker-API derzeit aufgrund der beschränkten Browserunterstützung noch nicht produktiv einsetzen lässt, hat sie viel Potenzial, um gerade Webapps für das mobile Internet schneller und komfortabler zu machen.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Agenturpartner

Chris Hortsch Webdesign

Berlin

minddraft AG

Allenwinden

SEO Galaxy

Udler

Evergreen Media

Innsbruck

Orange Services

München

Alle Agenturpartner

Jobs

Webtexter für SEO Agentur

Salzburg (Österreich)

Teamleiter Online Marketing

München

Junior Online Marketing Manager

München

Junior SEO Manager in München

München

Online Marketing Manager

Innsbruck

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

Dunkel Design – herzlich willkommen auf Dr. Web

Wir freuen uns, dass Moritz Dunkel mit seiner Agentur DNKL.DSGN aus Köln an Bord ist. Moritz Dunkel von Dunkel Design verstärkt unser Agentur-Netzwerk. Inhaltsstarke Seiten

 →   
Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.