JavaScript => Lavoratori

Sintassi

nuovo lavoratore (file)
postMessage (dati, trasferimenti)
onmessage = function (message) {/ * ... * /}
onerror = function (message) {/ * ... * /}
terminare()

Osservazioni

I service worker sono abilitati solo per i siti web serviti su HTTPS.

Registra un addetto all'assistenza

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

Puoi chiamare register() su ogni caricamento della pagina. Se il SW è già registrato, il browser fornisce l'istanza già in esecuzione
Il file SW può essere un nome qualsiasi. sw.js è comune.
La posizione del file SW è importante perché definisce l'ambito del SW. Ad esempio, un file SW su /js/sw.js può intercettare solo le richieste di fetch per i file che iniziano con /js/ . Per questo motivo di solito vedi il file SW nella directory di livello superiore del progetto.

Web Worker

Un web worker è un modo semplice per eseguire script nei thread in background poiché il thread worker può eseguire attività (incluse le attività I / O utilizzando xmlHttpRequest) senza interferire con l'interfaccia utente. Una volta creato, un lavoratore può inviare messaggi che possono essere diversi tipi di dati (eccetto le funzioni) al codice JavaScript che lo ha creato inviando messaggi a un gestore di eventi specificato da quel codice (e viceversa).

I lavoratori possono essere creati in pochi modi.

Il più comune è da un semplice URL:

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

È anche possibile creare un lavoratore in modo dinamico da una stringa utilizzando 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);

Lo stesso metodo può essere combinato con Function.toString() per creare un worker da una funzione esistente:

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

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

var webworker = new Worker(blobURL);

Un semplice operatore di servizio

main.js

Un lavoratore di servizio è un lavoratore guidato da eventi registrato su un'origine e un percorso. Prende la forma di un file JavaScript in grado di controllare la pagina web / sito a cui è associato, intercettare e modificare le richieste di navigazione e risorse e memorizzare le risorse in modo granulare per darti il controllo completo su come si comporta la tua app in determinate situazioni (il più ovvio è quando la rete non è disponibile).

Fonte: MDN

Poche cose:

È un JavaScript Worker, quindi non può accedere direttamente al DOM
È un proxy di rete programmabile
Sarà terminato quando non in uso e riavviato quando sarà necessario
Un addetto al servizio ha un ciclo di vita completamente separato dalla tua pagina web
È necessario HTTPS

Questo codice che verrà eseguito nel contesto del documento, (o) questo JavaScript sarà incluso nella tua pagina tramite un tag <script> .

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

Questo è il codice del lavoratore del servizio ed è eseguito nel Global Space di ServiceWorker .

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

Lavoratori dedicati e lavoratori condivisi

Lavoratori Dedicati

Un web worker dedicato è accessibile solo dallo script che lo ha chiamato.

Applicazione principale:

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

Lavoratori condivisi

Un lavoratore condiviso è accessibile da più script, anche se sono accessibili da finestre, iframe o anche lavoratori diversi.

Creare un worker condiviso è molto simile a come crearne uno dedicato, ma invece della comunicazione straight-forward tra il thread principale e il thread worker, devi comunicare tramite un port object, cioè una porta esplicita deve essere aperto in modo che più script possano usarlo per comunicare con l'operatore condiviso. (Nota che i lavoratori dedicati lo fanno implicitamente)

Applicazione principale

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

Si noti che l'impostazione di questo gestore messaggi nel thread di lavoro apre implicitamente anche la connessione della porta al thread padre, quindi la chiamata a port.start() non è effettivamente necessaria, come indicato sopra.

Termina un lavoratore

Una volta che hai finito con un lavoratore, dovresti terminarlo. Questo aiuta a liberare risorse per altre applicazioni sul computer dell'utente.

Filo principale:

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

Nota : il metodo terminate non è disponibile per gli addetti all'assistenza. Sarà terminato quando non è in uso, e riavviato quando sarà necessario.

Discussione del lavoratore:

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

Popolamento della cache

Dopo aver registrato l'addetto all'assistenza, il browser proverà a installare e successivamente a attivare l'addetto all'assistenza.

Installa il listener di eventi

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

caching

È possibile utilizzare questo evento di installazione restituito per memorizzare nella cache le risorse necessarie per eseguire l'app offline. Sotto l'esempio usa la cache api per fare lo stesso.

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

Comunicare con un Web Worker

Poiché i lavoratori vengono eseguiti in un thread separato da quello che li ha creati, la comunicazione deve avvenire tramite postMessage .

Nota: a causa dei diversi prefissi di esportazione, alcuni browser hanno webkitPostMessage invece di postMessage . Devi sovrascrivere postMessage per assicurarti che i lavoratori "lavorino" (nessun gioco di postMessage ) nella maggior parte dei posti possibili:

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

Dal thread principale (finestra principale):

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

Dal lavoratore, 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"
});

In alternativa, puoi anche aggiungere listener di eventi usando onmessage :