Обзор веб-воркеров и сервис-воркеров - HTML5

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

Ответ на эту проблему:

Веб-воркеры HTML5.

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

HTML5 - пятая и текущая основная версия стандарта HTML.
HTML 5 был впервые выпущен в общедоступной форме 22 января 2008 г., а в октябре 2014 г. было внесено существенное обновление и статус Рекомендации W3C. Подробнее см. Https://en.wikipedia.org/wiki/HTML5

Напишем нашего первого веб-воркера:

Во-первых, нам нужно проверить поддержку Worker в браузере,

if (typeof(Worker) !== “undefined”) {
 document.getElementById(“browser”).innerHTML =
 “Your browser supports Web Workers”;
 }

Теперь давайте напишем код для нашего первого Web Worker,

var myWorker = new Worker(‘/some/path-to-your.js’);
myWorker.onmessage = function(event) {
 console.log(‘We got some data delivered!’, event.data);
};

Мы создаем воркер, указав путь к нашему файлу JavaScript. В JS мы выполним некоторую интенсивную работу (сняв нагрузку с основного потока), и как только мы закончим, мы будем использовать функцию с именем postMessage(data) для обратной связи с основным потоком. В основном потоке мы будем использовать функцию с именем onmessage(), которая будет выводить список для нашего воркера и получать сообщение публикации.

Я написал один простой пример, у нас интенсивная обработка с веб-воркером и без него. Вы можете проверить пример здесь,
http://web-worker-example.s3-website-ap-northeast-1.amazonaws.com

Дополнительную информацию о веб-API можно найти по адресу:
https://developer.mozilla.org/en-US/docs/Web/API/Worker

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

Service worker - это сценарий, который ваш браузер запускает в фоновом режиме, отдельно от веб-страницы, открывая доступ к функциям, которым не нужны веб-страница или взаимодействие с пользователем. Сегодня они уже включают такие функции, как push-уведомления и фоновая синхронизация. С помощью этого сценария вы можете отслеживать сетевой трафик страницы, управлять push-уведомлениями и разрабатывать веб-приложения «в первую очередь офлайн».

На что следует обратить внимание:

  • С сервис-воркером у нас нет доступа к объекту Window, следовательно, нет прямого доступа к DOM.
  • Мы не можем запустить сервис-воркер на HTTP-порту 80 (во время разработки мы можем использовать localhost)

Жизненный цикл обслуживающего работника:

А теперь давайте зарегистрируем нашего первого сервис-воркера.

if('serviceWorker' in navigator) {
    navigator.serviceWorker
         .register('bs-sw.js')
         .then(function() { console.log("SW Registered"); });
   }

код в нашем файле bs-sw.js

self.addEventListener('install', function(e) {
    e.waitUntil(
        caches.open('ServiceWorkerExample').then(function(cache) {
            return cache.addAll([
                '/',
                '/sw-index.html',
                '/tool-img.png'
            ]);
        })
    );
});

Это «установит» нашего сервис-воркера, и мы будем кэшировать необходимый контент здесь, на стороне клиента. Вы можете подтвердить работника службы (в хроме), проверив страницу.

Теперь перейдем к офлайн-режиму и обновим страницу,

Отображается страница «Нет интернета». Чтобы сделать нашу страницу доступной в автономном режиме, нам нужно перехватить fetch() вызов с помощью сервис-воркера и получить кэшированное содержимое. Для этого добавьте следующий код в файл bs-sw.js

self.addEventListener('fetch', function(event) {
    console.log(event.request.url);
    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    );
});

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

Пример на - https://skynet86.github.io/service-worker-example/sw-index.html

Да, вы выполнили свою первую автономную разработку страницы.

Сервисный работник предоставляет некоторые другие ключевые функции, такие как,

  • Фоновая синхронизация
  • Отправить уведомление

О чем мы поговорим в другой статье.

Спасибо за чтение. Удачного кодирования.

Репозитории кода на Github.com: