JavaScript => arbeiders

Syntaxis

nieuwe werknemer (bestand)
postMessage (gegevens, overdrachten)
onmessage = functie (bericht) {/ * ... * /}
onerror = functie (bericht) {/ * ... * /}
beëindigen()

Opmerkingen

Servicemedewerkers zijn alleen ingeschakeld voor websites die via HTTPS worden weergegeven.

Registreer een servicemedewerker

// 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);
  });
}

U kunt register() oproepen bij elke pagina die wordt geladen. Als de SW al is geregistreerd, geeft de browser u een exemplaar dat al actief is
Het SW-bestand kan elke naam hebben. sw.js komt veel voor.
De locatie van het SW-bestand is belangrijk omdat dit het bereik van de SW definieert. Bijvoorbeeld, een SW-bestand op /js/sw.js kan alleen onderscheppen fetch aanvragen voor bestanden die beginnen met /js/ . Om deze reden ziet u het SW-bestand meestal in de bovenste map van het project.

Webwerker

Een webwerker is een eenvoudige manier om scripts in achtergrondthreads uit te voeren, omdat de werkthread taken kan uitvoeren (inclusief I / O-taken met xmlHttpRequest) zonder de gebruikersinterface te verstoren. Eenmaal gemaakt, kan een medewerker berichten van verschillende datatypes (behalve functies) naar de JavaScript-code die het heeft gemaakt, verzenden door berichten te posten naar een gebeurtenishandler die door die code is opgegeven (en vice versa.)

Werknemers kunnen op verschillende manieren worden gemaakt.

De meest voorkomende is van een eenvoudige URL:

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

Het is ook mogelijk om een Worker dynamisch te maken op basis van een string met behulp van URL.createObjectURL() :

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

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

var webworker = new Worker(blobURL);

Dezelfde methode kan worden gecombineerd met Function.toString() om een werknemer te maken van een bestaande functie:

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

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

var webworker = new Worker(blobURL);

Een eenvoudige servicemedewerker

main.js

Een servicemedewerker is een gebeurtenisgestuurde medewerker die is geregistreerd tegen een oorsprong en een pad. Het heeft de vorm van een JavaScript-bestand dat de webpagina / site waaraan het is gekoppeld, kan beheren, navigatie- en bronverzoeken kan onderscheppen en wijzigen, en bronnen op een zeer gedetailleerde manier kan opslaan om u volledige controle te geven over hoe uw app zich in bepaalde situaties gedraagt. (de meest voor de hand liggende is wanneer het netwerk niet beschikbaar is.)

Bron: MDN

Een paar dingen:

Het is een JavaScript Worker, dus het heeft geen directe toegang tot de DOM
Het is een programmeerbare netwerkproxy
Het wordt beëindigd wanneer het niet wordt gebruikt en opnieuw gestart wanneer het de volgende keer nodig is
Een servicemedewerker heeft een levenscyclus die volledig los staat van uw webpagina
HTTPS is nodig

Deze code die wordt uitgevoerd in de Document-context, (of) deze JavaScript zal worden opgenomen in uw pagina via een <script> -tag.

// 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

Dit is de servicemedewerkerscode en wordt uitgevoerd in de ServiceWorker Global Scope .

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

Toegewijde werknemers en gedeelde werknemers

Toegewijde werknemers

Een toegewijde webmedewerker is alleen toegankelijk via het script dat het heeft genoemd.

Belangrijkste toepassing:

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]);
});

Gedeelde werknemers

Een gedeelde werker is toegankelijk via meerdere scripts - zelfs als deze worden benaderd door verschillende vensters, iframes of zelfs werkers.

Het maken van een gedeelde werker lijkt erg op het maken van een speciale werker, maar in plaats van de directe communicatie tussen de hoofdthread en de werkthread, moet u communiceren via een poortobject, dwz dat een expliciete poort moet worden geopend zodat meerdere scripts het kunnen gebruiken om met de gedeelde medewerker te communiceren. (Merk op dat toegewijde werknemers dit impliciet doen)

Hoofdapplicatie

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]);
    }
}

Houd er rekening mee dat het instellen van deze berichtenhandler in de werkthread impliciet ook de poortverbinding opent naar de bovenliggende thread, zodat de aanroep van port.start() eigenlijk niet nodig is, zoals hierboven vermeld.

Een werknemer beëindigen

Als u klaar bent met een medewerker, moet u deze beëindigen. Dit helpt bronnen vrij te maken voor andere toepassingen op de computer van de gebruiker.

Hoofddraad:

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

Opmerking : de terminate is niet beschikbaar voor servicemedewerkers. Het wordt beëindigd wanneer het niet in gebruik is en opnieuw gestart wanneer het de volgende keer nodig is.

Werknemersdraad:

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

Je cache vullen

Nadat uw servicemedewerker is geregistreerd, probeert de browser de servicemedewerker te installeren en later te activeren.

Event-listener installeren

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

caching

Men kan deze teruggestuurde installgebeurtenis gebruiken om de middelen te cachen die nodig zijn om de app offline te draaien. Onderstaand voorbeeld gebruikt de cache api om hetzelfde te doen.

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'
      ]);
    })
  );
});

Communiceren met een webwerker

Aangezien werknemers in een andere thread lopen dan die waardoor ze zijn gemaakt, moet communicatie via postMessage .

Opmerking: vanwege de verschillende exportvoorvoegsels hebben sommige browsers webkitPostMessage plaats van postMessage . U moet postMessage overschrijven om ervoor te zorgen dat werknemers op de meeste plaatsen 'werken' (geen woordspeling bedoeld):

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

Vanuit de hoofdthread (bovenliggend venster):

// 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"]
});

Van de werknemer, 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"
});

Als alternatief kunt u ook gebeurtenisluisteraars toevoegen met behulp van onmessage :