JavaScript => Arbeitskräfte

Syntax

neuer Arbeiter (Datei)
postMessage (Daten, Überweisungen)
onmessage = Funktion (Nachricht) {/ * ... * /}
onerror = Funktion (Nachricht) {/ * ... * /}
kündigen()

Bemerkungen

Servicemitarbeiter sind nur für Websites aktiviert, die über HTTPS bereitgestellt werden.

Registrieren Sie einen Service-Mitarbeiter

// Check if service worker is available. 
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    console.log('SW registration succeeded with scope:', registration.scope);
  }).catch(function(e) {
    console.log('SW registration failed with error:', e);
  });
}

Sie können register() bei jedem Laden der Seite aufrufen. Wenn die SW bereits registriert ist, stellt Ihnen der Browser eine Instanz zur Verfügung, die bereits ausgeführt wird
Die SW-Datei kann einen beliebigen Namen haben. sw.js ist üblich.
Der Speicherort der SW-Datei ist wichtig, da sie den Gültigkeitsbereich der SW definiert. Zum Beispiel kann eine SW - Datei bei /js/sw.js kann nur abfangen fetch Anfragen nach Dateien , die mit beginnen /js/ . Aus diesem Grund sehen Sie die SW-Datei normalerweise im obersten Verzeichnis des Projekts.

Web Worker

Ein Web-Worker ist eine einfache Möglichkeit, Skripts in Hintergrund-Threads auszuführen, da der Worker-Thread Aufgaben (einschließlich E / A-Aufgaben mit xmlHttpRequest) ausführen kann, ohne die Benutzeroberfläche zu beeinträchtigen. Nach der Erstellung kann ein Worker Nachrichten mit unterschiedlichen Datentypen (mit Ausnahme von Funktionen) an den JavaScript-Code senden, der ihn erstellt hat, indem er Nachrichten an einen durch diesen Code angegebenen Ereignishandler sendet (und umgekehrt).

Arbeiter können auf verschiedene Arten erstellt werden.

Die häufigste ist eine einfache URL:

var webworker = new Worker("./path/to/webworker.js");

Es ist auch möglich, einen Worker dynamisch aus einer Zeichenfolge mithilfe von URL.createObjectURL() zu erstellen:

var workerData = "function someFunction() {}; console.log('More code');";

var blobURL = URL.createObjectURL(new Blob(["(" + workerData + ")"], { type: "text/javascript" }));

var webworker = new Worker(blobURL);

Dieselbe Methode kann mit Function.toString() kombiniert werden, um einen Worker aus einer vorhandenen Funktion zu erstellen:

var workerFn = function() {
    console.log("I was run");
};

var blobURL = URL.createObjectURL(new Blob(["(" + workerFn.toString() + ")"], { type: "text/javascript" }));

var webworker = new Worker(blobURL);

Ein einfacher Servicemitarbeiter

main.js

Ein Service-Worker ist ein ereignisgesteuerter Worker, der für einen Ursprung und einen Pfad registriert ist. Es handelt sich dabei um eine JavaScript-Datei, die die mit ihr verknüpfte Webseite / Website steuern kann, Navigations- und Ressourcenanfragen abfängt und ändert sowie Ressourcen in einer sehr genauen Art und Weise speichert, um Ihnen die vollständige Kontrolle über das Verhalten Ihrer App in bestimmten Situationen zu geben (Das offensichtlichste ist, wenn das Netzwerk nicht verfügbar ist.)

Quelle: MDN

Wenige Sachen:

Es ist ein JavaScript-Worker und kann nicht direkt auf das DOM zugreifen
Es ist ein programmierbarer Netzwerk-Proxy
Es wird beendet, wenn es nicht verwendet wird, und es wird neu gestartet, wenn es das nächste Mal benötigt wird
Ein Service-Mitarbeiter hat einen Lebenszyklus, der vollständig von Ihrer Webseite getrennt ist
HTTPS wird benötigt

Dieser Code, der im Document-Kontext (oder) dieses JavaScript ausgeführt wird, wird über ein <script> -Tag in Ihre Seite eingefügt.

// we check if the browser supports ServiceWorkers
if ('serviceWorker' in navigator) {
  navigator
    .serviceWorker
    .register(
      // path to the service worker file
      'sw.js'
    )
    // the registration is async and it returns a promise
    .then(function (reg) {
      console.log('Registration Successful');
    });
}

sw.js

Dies ist der Service Worker Code, der im ServiceWorker Global Scope ausgeführt wird .

self.addEventListener('fetch', function (event) {
  // do nothing here, just log all the network requests
  console.log(event.request.url);
});

Engagierte Arbeiter und Shared Workers

Engagierte Arbeiter

Auf einen dedizierten Web-Worker kann nur mit dem Skript zugegriffen werden, das ihn aufgerufen hat.

Hauptanwendung:

var worker = new Worker('worker.js');
worker.addEventListener('message', function(msg) {
    console.log('Result from the worker:', msg.data);
});
worker.postMessage([2,3]);

worker.js:

self.addEventListener('message', function(msg) {
    console.log('Worker received arguments:', msg.data);
    self.postMessage(msg.data[0] + msg.data[1]);
});

Shared Workers

Auf einen gemeinsam genutzten Worker kann von mehreren Skripts aus zugegriffen werden - auch wenn von verschiedenen Fenstern, Iframes oder sogar Workern auf sie zugegriffen wird.

Das Erstellen eines freigegebenen Workers ist dem Erstellen eines dedizierten Workers sehr ähnlich, aber anstelle der direkten Kommunikation zwischen dem Haupt-Thread und dem Worker-Thread müssen Sie über ein Port-Objekt kommunizieren, dh ein expliziter Port muss vorhanden sein geöffnet werden, damit mehrere Skripts es verwenden können, um mit dem freigegebenen Worker zu kommunizieren. (Beachten Sie, dass engagierte Mitarbeiter dies implizit tun)

Hauptanwendung

var myWorker = new SharedWorker('worker.js');
myWorker.port.start();  // open the port connection

myWorker.port.postMessage([2,3]);

worker.js

self.port.start(); open the port connection to enable two-way communication

self.onconnect = function(e) {
    var port = e.ports[0];  // get the port

    port.onmessage = function(e) {
        console.log('Worker revceived arguemnts:', e.data);
        port.postMessage(e.data[0] + e.data[1]);
    }
}

Beachten Sie, dass das Einrichten dieses Nachrichtenhandlers im port.start() auch implizit die port.start() zum übergeordneten Thread öffnet, sodass der Aufruf von port.start() nicht wie oben erwähnt tatsächlich erforderlich ist.

Arbeiter kündigen

Sobald Sie mit einem Arbeiter fertig sind, sollten Sie ihn beenden. Dies hilft, Ressourcen für andere Anwendungen auf dem Computer des Benutzers freizugeben.

Haupt-Bedroung:

// Terminate a worker from your application.
worker.terminate();

Hinweis : Die terminate ist nicht für Servicemitarbeiter verfügbar. Es wird beendet, wenn es nicht verwendet wird, und es wird neu gestartet, wenn es das nächste Mal benötigt wird.

Arbeiter-Thread:

// Have a worker terminate itself.
self.close();

Füllen Sie Ihren Cache

Nachdem Ihr Service-Mitarbeiter registriert wurde, versucht der Browser, den Service-Mitarbeiter zu installieren und später zu aktivieren.

Installieren Sie den Ereignis-Listener

this.addEventListener('install', function(event) {
    console.log('installed');
});

Caching

Dieses zurückgegebene Installationsereignis kann zum Zwischenspeichern der für die offline Ausführung der App erforderlichen Elemente verwendet werden. Das folgende Beispiel verwendet die Cache-API, um dasselbe zu tun.

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        /* Array of all the assets that needs to be cached */
        '/css/style.css',
        '/js/app.js',
        '/images/snowTroopers.jpg'
      ]);
    })
  );
});

Kommunikation mit einem Web Worker

Da die Worker in einem separaten Thread von dem, in dem sie erstellt wurden, laufen, muss die Kommunikation über postMessage .

Hinweis: Aufgrund der unterschiedlichen Exportpräfixe verfügen einige Browser über webkitPostMessage anstelle von postMessage . Sie sollten postMessage überschreiben, um sicherzustellen, dass die Mitarbeiter an den meisten möglichen Stellen "arbeiten" (kein Wortspiel beabsichtigt):

worker.postMessage = (worker.webkitPostMessage || worker.postMessage);

Vom Hauptthread (übergeordnetes Fenster):

// Create a worker
var webworker = new Worker("./path/to/webworker.js");

// Send information to worker
webworker.postMessage("Sample message");

// Listen for messages from the worker
webworker.addEventListener("message", function(event) {
    // `event.data` contains the value or object sent from the worker
    console.log("Message from worker:", event.data); // ["foo", "bar", "baz"]
});

Vom Arbeiter in webworker.js :

// Send information to the main thread (parent window)
self.postMessage(["foo", "bar", "baz"]);

// Listen for messages from the main thread
self.addEventListener("message", function(event) {
    // `event.data` contains the value or object sent from main
    console.log("Message from parent:", event.data); // "Sample message"
});

Alternativ können Sie mit onmessage auch Ereignis-Listener hinzufügen: