JavaScript => Trabajadores

Sintaxis

nuevo trabajador (archivo)
PostMessage (datos, transferencias)
onmessage = function (message) {/ * ... * /}
onerror = función (mensaje) {/ * ... * /}
Terminar()

Observaciones

Los trabajadores de servicio solo están habilitados para sitios web servidos a través de HTTPS.

Registrar un trabajador de servicio

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

Puede llamar a register() en cada carga de página. Si el SW ya está registrado, el navegador le proporciona una instancia que ya se está ejecutando
El archivo SW puede tener cualquier nombre. sw.js es común.
La ubicación del archivo SW es importante porque define el alcance del SW. Por ejemplo, un archivo SW en /js/sw.js solo puede interceptar solicitudes de fetch para archivos que comienzan con /js/ . Por este motivo, normalmente ve el archivo SW en el directorio de nivel superior del proyecto.

Trabajador web

Un trabajador web es una forma sencilla de ejecutar scripts en subprocesos en segundo plano, ya que el subproceso de trabajo puede realizar tareas (incluidas las tareas de E / S utilizando xmlHttpRequest) sin interferir con la interfaz de usuario. Una vez creado, un trabajador puede enviar mensajes que pueden ser de diferentes tipos de datos (excepto funciones) al código JavaScript que lo creó mediante la publicación de mensajes en un controlador de eventos especificado por ese código (y viceversa).

Los trabajadores pueden ser creados de varias maneras.

Lo más común es desde una simple URL:

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

También es posible crear un Worker dinámicamente a partir de una cadena usando 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);

El mismo método se puede combinar con Function.toString() para crear un trabajador a partir de una función existente:

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 trabajador de servicio simple

main.js

Un trabajador de servicio es un trabajador impulsado por eventos registrado contra un origen y una ruta. Toma la forma de un archivo JavaScript que puede controlar la página web / sitio al que está asociado, interceptando y modificando las solicitudes de recursos y navegación, y almacenando en caché los recursos de manera muy granular para darle un control completo sobre cómo se comporta su aplicación en ciertas situaciones (El más obvio es cuando la red no está disponible.)

Fuente: MDN

Pocas cosas:

Es un Trabajador de JavaScript, por lo que no puede acceder al DOM directamente
Es un proxy de red programable.
Se terminará cuando no esté en uso y se reiniciará cuando sea necesario.
Un trabajador de servicio tiene un ciclo de vida que está completamente separado de su página web
Se necesita HTTPS

Este código que se ejecutará en el contexto del documento, (o) este JavaScript se incluirá en su página a través de una etiqueta <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

Este es el código de trabajador de servicio y se ejecuta en el alcance global de ServiceWorker .

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

Trabajadores dedicados y trabajadores compartidos

Trabajadores dedicados

A un trabajador web dedicado solo se puede acceder mediante el script que lo llamó.

Aplicación principal:

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

Trabajadores compartidos

Se puede acceder a un trabajador compartido mediante múltiples scripts, incluso si se accede a ellos desde diferentes ventanas, marcos o incluso trabajadores.

Crear un trabajador compartido es muy similar a cómo crear uno dedicado, pero en lugar de la comunicación directa entre el hilo principal y el hilo del trabajador, deberá comunicarse a través de un objeto de puerto, es decir, un puerto explícito tiene que Puede abrirse para que múltiples scripts puedan usarlo para comunicarse con el trabajador compartido. (Tenga en cuenta que los trabajadores dedicados hacen esto implícitamente)

Aplicación principal

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

Tenga en cuenta que la configuración de este controlador de mensajes en el subproceso de trabajo también abre implícitamente la conexión del puerto al subproceso principal, por lo que la llamada a port.start() no es realmente necesaria, como se indicó anteriormente.

Terminar un trabajador

Una vez que haya terminado con un trabajador debe terminarlo. Esto ayuda a liberar recursos para otras aplicaciones en la computadora del usuario.

Hilo principal:

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

Nota : el método de terminate no está disponible para los trabajadores del servicio. Se terminará cuando no esté en uso y se reiniciará cuando sea necesario.

Hilo del trabajador:

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

Poblando tu caché

Una vez que su trabajador de servicio se haya registrado, el navegador intentará instalarlo y luego lo activará.

Instalar detector de eventos

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

Almacenamiento en caché

Se puede usar este evento de instalación devuelto para almacenar en caché los activos necesarios para ejecutar la aplicación sin conexión. El siguiente ejemplo utiliza la api de caché para hacer lo mismo.

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

Comunicarse con un trabajador web

Dado que los trabajadores se ejecutan en un subproceso separado del que los creó, la comunicación debe realizarse a través de postMessage .

Nota: Debido a los diferentes prefijos de exportación, algunos navegadores tienen webkitPostMessage lugar de postMessage . Debe anular el postMessage para asegurarse de que los trabajadores "trabajen" (no es un juego de palabras) en la mayoría de los lugares posibles:

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

Desde el hilo principal (ventana principal):

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

Del trabajador, en 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"
});

Alternativamente, también puede agregar escuchas de eventos usando onmessage :