JavaScript => Рабочие

Синтаксис

новый рабочий (файл)
postMessage (данные, переводы)
onmessage = функция (сообщение) {/ * ... * /}
onerror = function (message) {/ * ... * /}
прекратить ()

замечания

Работники службы разрешены только для веб-сайтов, обслуживаемых HTTPS.

Зарегистрировать сервисного работника

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

Вы можете вызвать register() для каждой загрузки страницы. Если SW уже зарегистрирован, браузер предоставляет вам экземпляр, который уже запущен
SW-файл может быть любым именем. sw.js является обычным явлением.
Расположение файла SW важно, поскольку он определяет область SW. Например, SW-файл в /js/sw.js может только перехватывать запросы fetch для файлов, начинающихся с /js/ . По этой причине вы обычно видите файл SW в каталоге верхнего уровня проекта.

Веб-рабочий

Веб-рабочий - это простой способ запускать сценарии в фоновом потоке, поскольку рабочий поток может выполнять задачи (включая задачи ввода-вывода с использованием xmlHttpRequest), не мешая пользовательскому интерфейсу. После создания рабочий может отправлять сообщения, которые могут быть разными типами данных (кроме функций), к коду JavaScript, который его создал, отправив сообщения обработчику событий, указанному этим кодом (и наоборот).

Рабочих можно создать несколькими способами.

Наиболее распространенным является простой URL:

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

Также можно динамически создавать URL.createObjectURL() из строки, используя 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);

Тот же метод можно комбинировать с Function.toString() для создания рабочего из существующей функции:

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

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

var webworker = new Worker(blobURL);

Простой сервисный работник

main.js

Сервисный работник является управляемым событиями работником, зарегистрированным в отношении источника и пути. Он принимает форму файла JavaScript, который может управлять веб-страницей / сайтом, с которым он связан, перехватывает и изменяет запросы на навигацию и ресурсы, а также кэширует ресурсы очень подробно, чтобы дать вам полный контроль над тем, как ваше приложение ведет себя в определенных ситуациях (наиболее очевидным является то, что сеть недоступна).

Источник: MDN

Немного вещей:

Это рабочий JavaScript, поэтому он не может напрямую обращаться к DOM
Это программируемый сетевой прокси
Он будет прекращен, если он не используется, и перезапускается, когда это необходимо
Сервисный рабочий имеет жизненный цикл, который полностью отделен от вашей веб-страницы
Требуется HTTPS

Этот код, который будет выполнен в контексте документа, (или) этот JavaScript будет включен в вашу страницу с помощью <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

Это код сервисного сотрудника и выполняется в глобальном масштабе ServiceWorker .

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

Выделенные рабочие и совместные рабочие

Выделенные работники

Специальный веб-рабочий доступен только сценарию, который его назвал.

Основное применение:

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

Общие работники

Доступ к совместному рабочему файлу доступен несколькими сценариями - даже если к ним обращаются различные окна, iframe или даже рабочие.

Создание общего рабочего очень похоже на то, как создать выделенный, но вместо прямой связи между основным потоком и рабочим потоком вам придется общаться через объект порта, т. Е. Явный порт должен открывается, поэтому несколько сценариев могут использовать его для общения с общим рабочим. (Обратите внимание, что посвященные работники делают это неявно)

Основное приложение

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

Обратите внимание, что настройка этого обработчика сообщений в рабочем потоке также неявно открывает соединение порта с родительским потоком, поэтому вызов на port.start() самом деле не нужен, как указано выше.

Прекратить работу

Как только вы закончите с работником, вы должны его прекратить. Это помогает высвободить ресурсы для других приложений на компьютере пользователя.

Основная тема:

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

Примечание . Метод terminate недоступен для рабочих служб. Он будет прекращен, если он не используется, и перезапустится, когда это будет необходимо.

Рабочая тема:

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

Заполнение кеша

После регистрации вашего сервисного работ браузер попытается установить и позже активировать сервисного работника.

Установить прослушиватель событий

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

Кэширование

Это событие установки можно использовать для кэширования ресурсов, необходимых для запуска приложения в автономном режиме. Ниже пример использует кеш-апи, чтобы сделать то же самое.

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

Общение с веб-мастером

Поскольку работники работают в отдельном потоке от того, который их создал, связь должна произойти через postMessage .

Примечание. Из-за разных экспортных префиксов некоторые браузеры имеют webkitPostMessage вместо postMessage . Вы должны переопределить postMessage чтобы убедиться, что работники «работают» (не каламбур) в большинстве возможных мест:

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

Из основного потока (родительское окно):

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

От работника, в 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"
});

Кроме того, вы также можете добавить прослушивателей событий, используя onmessage :