JavaScript => arbetare

Syntax

ny arbetare (fil)
postMessage (data, överföringar)
onmessage = funktion (meddelande) {/ * ... * /}
onerror = funktion (meddelande) {/ * ... * /}
avsluta()

Anmärkningar

Servicearbetare är endast aktiverade för webbplatser som serveras via HTTPS.

Registrera en servicearbetare

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

Du kan ringa register() vid varje sidlast. Om SW redan är registrerat ger webbläsaren dig en instans som redan körs
SW-filen kan vara vilket namn som helst. sw.js är vanligt.
Platsen för SW-filen är viktig eftersom den definierar SW: s omfattning. En SW-fil på /js/sw.js kan till exempel bara avlyssna fetch för filer som börjar med /js/ . Av denna anledning ser du vanligtvis SW-filen i projektkatalogen på högsta nivå.

Webbarbetare

En webbarbetare är ett enkelt sätt att köra skript i bakgrundstrådar eftersom arbetartråden kan utföra uppgifter (inklusive I / O-uppgifter med xmlHttpRequest) utan att störa användargränssnittet. När den har skapats kan en arbetare skicka meddelanden som kan vara olika datatyper (förutom funktioner) till JavaScript-koden som skapade den genom att publicera meddelanden till en händelseshanterare som specificeras av den koden (och vice versa.)

Arbetare kan skapas på några sätt.

Det vanligaste är från en enkel URL:

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

Det är också möjligt att skapa en arbetare dynamiskt från en sträng med 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);

Samma metod kan kombineras med Function.toString() att skapa en arbetare från en befintlig funktion:

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

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

var webworker = new Worker(blobURL);

En enkel servicearbetare

main.js

En servicearbetare är en evenemangsstyrd arbetare som är registrerad mot ett ursprung och en väg. Det har formen av en JavaScript-fil som kan styra webbsidan / webbplatsen som den är associerad med, fånga upp och ändra navigerings- och resursförfrågningar och cache-resurser på ett mycket granulärt sätt för att ge dig full kontroll över hur din app beter sig i vissa situationer (det mest uppenbara är när nätverket inte är tillgängligt.)

Källa: MDN

Några saker:

Det är en JavaScript-arbetare, så den kan inte komma åt DOM direkt
Det är en programmerbar nätverksproxy
Den avslutas när den inte används och startas om när den nästa behövs
En servicearbetare har en livscykel som är helt separat från din webbsida
HTTPS behövs

Den här koden som kommer att köras i dokumentsammanhang, (eller) denna JavaScript kommer att inkluderas på din sida via en <script> -tagg.

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

Detta är servicearbetarkoden och körs i ServiceWorker Global Scope .

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

Dedikerade arbetare och delade arbetare

Dedikerade arbetare

En dedikerad webbarbetare är endast tillgänglig via skriptet som kallade det.

Huvudansökan:

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

Delade arbetare

En delad arbetare kan nås med flera skript - även om de nås av olika fönster, iframes eller till och med arbetare.

Att skapa en delad arbetare liknar mycket hur man skapar en dedikerad, men istället för den raka framkommunikationen mellan huvudtråden och arbetartråden måste du kommunicera via ett portobjekt, dvs. en uttrycklig port måste öppnas så att flera skript kan använda det för att kommunicera med den delade arbetaren. (Observera att dedikerade arbetare gör detta implicit)

Huvudansökan

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

Observera att inställningen av denna meddelandeshanterare i arbetartråden också implicit öppnar portanslutningen tillbaka till överordnad tråd, så samtalet till port.start() behövs inte, som noterats ovan.

Uppsägning av en arbetare

När du är klar med en arbetare bör du säga upp den. Detta hjälper till att frigöra resurser för andra applikationer på användarens dator.

Huvudtråd:

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

Obs : terminate är inte tillgänglig för servicearbetare. Det avslutas när den inte används och startas om när det nästa behövs.

Arbetartråd:

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

Populera din cache

När din servicearbetare har registrerats kommer webbläsaren att försöka installera och senare aktivera servicearbetaren.

Installera händelse lyssnare

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

caching

Man kan använda den här installationshändelsen som returneras för att cache de tillgångar som behövs för att köra appen offline. Nedanstående exempel använder cache-api för att göra samma sak.

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

Kommunikera med en webbarbetare

Eftersom arbetare körs i en separat tråd från den som skapade dem, måste kommunikation ske via postMessage .

Obs: På grund av de olika exportprefixerna har vissa webbläsare webkitPostMessage istället för postMessage . Du bör åsidosätta postMessage för att säkerställa att arbetarna "arbetar" (ingen ordning avsedd) på flest möjliga platser:

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

Från huvudtråden (överordnat fönster):

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

Från arbetaren, i 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"
});

Alternativt kan du också lägga till händelselister med onmessage :