Service Worker API

Этот перевод не завершен. Пожалуйста, помогите перевести эту статью с английского

Service worker фактически выполняет роль прокси-сервера, находящегося между веб-приложением и браузером, а также сетью (если доступна). Он позволяет (кроме прочего) описывать корректное поведение веб-приложения в режиме офлайн, перехватывать запросы сети и принимать соответствующие меры, основываясь на доступности сети, и обновлять данные, находящиеся на сервере при доступе к нему. Также они имеют доступ к push-уведомлениям и API для фоновой синхронизации.

Концепция и использование Service Worker

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

Service worker запускается в контексте worker'ов, поэтому он не имеет доступа к DOM и работает в потоке отдельном от основного потока JavaScript, управляющего вашим приложением, а следовательно — не блокирует его. Он призван быть полностью асинхронным; как следствие, синхронные API, такие как XHR и localStorage, в Service Worker'е использовать нельзя.

Из соображений безопасности service worker'ы работают только по HTTPS (либо, в целях разработки, на localhost). Давать сторонним людям возможность измененять сетевые запросы крайне опасно. Кроме того, Service Worker API недоступен в режиме приватного просмотра браузера Firefox.

Заметка: Service Worker'ы выигрывают у предыдущих решений, таких как AppCache, потому что не делают предположений о том, что вы пытаетесь сделать, и не ломаются, в случаях если их предположения не оказываются верными; вы имеете полный контроль над всем.

Заметка: Service worker'ы широко используют промисы (Promises). В общем случае они будут ждать ответа, после которого вернутся с успешным или неудачным завершением. Архитектура на промисах для этого подоходит идеально.

Регистрация

Service worker сначала регистрируется с помощью метода ServiceWorkerContainer.register(). В случае успешной регистрации, service worker будет загружен клиентом и попытается установиться/активироваться (см. ниже) для всех URL, доступных пользователю, или только для указанного вами подмножества.

Загрузка, установка и активация

Service Worker будет следовать следующему жизненному циклу:

  1. Загрузка
  2. Установка
  3. Активация

Когда пользователь впервые запросит доступ к сайту/странице, контролируемой Service Worker'ом, тот моментально будет загружен .

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

Установка производится в случае если загружаемый файл признается новым — либо отличным от уже установленного service worker (определяется через побайтовое сравнение), либо первым устанавливаемым service worker'ом для этой страницы/сайта.

Если это первый раз, когда service worker оказался доступен, будет проведена установка, а после успешного ее завершения — активация.

Если service worker уже существует, новая версия устанавливается в фоновом режиме, но не активируется — worker переходит в состояние в ожидании. Новая версия активируется только тогда, когда больше не останется загруженных страниц, использующих старый service worker. Как только это случится, новый service worker активируется (станет активным worker'ом). Активация может произойти раньше при использовании ServiceWorkerGlobalScope.skipWaiting(), а существующие страницы могут быть переведены под контроль активного воркера с помощью Clients.claim().

Вы можете подписаться на InstallEvent; для того чтобы подготовить ваш service worker к использованию, к примеру, чтобы создать кеш при помощи встроенного API хранилища и разместить внутри него данные, которые вам необходимы в вашем приложении для работы офлайн.

Есть также событие activate. Момент, когда это событие наступает, является удачным для очистки старого кеша и всего, что ассоциировалось с предыдущей версией вашего service worker'а.

Service worker может отвечать на запросы, используя событие FetchEvent. Вы можете изменять ответ на эти запросы на свое усмотрение используя метод FetchEvent.respondWith.

Заметка: Так как выполнение oninstall/onactivate может занять время, спецификация service worker предоставляет метод waitUntil, который возвращает промис, когда вызывается oninstall или onactivate. Функциональные события не отправляются service worker, пока промис не завершится успешно.

Для полного руководства по созданию рабочего примера читайте Использование Service Worker.

Другие варианты использования

Service worker'ы также предназначены для таких вещей, как:

  • Фоновая синхронизация данных
  • Ответ на запросы от других источников
  • Получение централизованного обновления для данных использующих тяжелые вычисления, таких как геолокация или гироскоп, для того чтобы несколько станиц могли использовать одни и те же данные
  • Компиляция и управление зависимостями на клиентской стороне для CoffeeScript, less, CJS/AMD модулей и т.д. для целей разработки
  • Подписка на фоновые сервисы
  • Кастомная шаблонизация, основанная на определённых паттернах URL
  • Улучшение производительности, с помощью предварительной загрузки ресурсов, которые понадобятся пользователю в ближайшем будущем, например несколько последующих картинок в фотоальбоме.

В будущем service worker'ы будут способны на многие другие полезные вещи для веб-платформ, приближая их к нативным приложеням. Примечательно, что другие спецификации могут и будут использовать контекст service worker, к примеру для:

  • Фоновой синхронизации: запускать service worker даже когда ни одного пользователя нет на сайте, чтобы обновить кеш.
  • Реакции на пуш-сообщения: запускать service worker для отправки сообщений пользователям, чтобы оповестить их о новом доступном контенте.
  • Реакции на определенное время и дату
  • Введение гео-ограничений

Интерфейс

Cache
Представляет хранилище для объектов Request / Response, которые кешируются, как часть жизненного цикла ServiceWorker.
CacheStorage
Представляет хранилище для объектов Cache. Он создает главную директорию для всех именовынных кешей, к которым ServiceWorker имеет доступ, и поддерживает отображение строковых имен соответствующего объекта Cache.
Client
Представляет область видимости клиента service worker. Это либо документ в контексте браузера, либо SharedWorker, который контролируется активным worker'ом.
Clients
Представлет контейнер для списка объектов Client; основной способ получить доступ к клиентам активного service worker'а текущего источника.
ExtendableEvent
Расширяет жизненный цикл событий install и activate, отправляемых ServiceWorkerGlobalScope как часть жизненного цикла service worker'а. Это гарантирует, что любое функциональное событие (как FetchEvent) не отправится в ServiceWorker, пока он не обновит шаблон данных, удалив устаревшие данные кеша.
ExtendableMessageEvent
Обект событий message запускается в service worker (когда канал сообщений в ServiceWorkerGlobalScope получил новое сообщение из другого контекста) — расширяет жизненный цикл таких событий.
FetchEvent
Параметр, передающийся в обработчик ServiceWorkerGlobalScope.onfetch, FetchEvent представляет собой событие получения, которое отправляется в  ServiceWorkerGlobalScope ServiceWorker. Он содержит информацию о запросе и результирующем ответе и обеспечивает FetchEvent.respondWith() метод, который позволяет отправить произвольный ответ обратно контролируемой странице.
InstallEvent
Параметр, передющийся в  oninstall обработчик, InstallEvent представляет сообой событие установки, которое отправляется ServiceWorkerGlobalScope ServiceWorker. Как наследник ExtendableEvent, он гарантирует, что функциональные события, такие как FetchEvent, не будут отправлены во время установки. 
Navigator.serviceWorker
Возвращает объект ServiceWorkerContainer, который обеспечивает доступ к регистрации, удалению, обновлению и коммуникации с объектами ServiceWorkerассоциируемого документа.
NotificationEvent
Параметр, передаваемый в обработчик onnotificationclick, интерфейс NotificationEvent представляет событие уведомления на клик, которое отправлется в ServiceWorkerGlobalScope service worker'а.
ServiceWorker
Представляет service worker. Несколько контекстов браузера (страницы, worker'ы, и т.д.) могут быть ассоциированы с одним объектом ServiceWorker.
ServiceWorkerContainer
Предоставляет объект, описывающий service worker как общий блок в экосистеме сети, включая возможность регистрировать, отключать и обновлять service worker'ы, и предоставляет доступ к состоянию текущего и других зарагестрованных service worker'ов.
ServiceWorkerGlobalScope
Представляет глобальный контекст исполнения service worker'а.
ServiceWorkerMessageEvent
Содержит информацию о событии, отправленном целевому  ServiceWorkerContainer
ServiceWorkerRegistration
Представляет регистрацию service worker'а.
SyncEvent

SyncEvent предсталяет синхронное действие, котрое отправляется ServiceWorkerGlobalScope ServiceWorker. 

SyncManager
Обеспечивает интерфейс регистрации и перечисления синхронных рагистраций.
WindowClient
Предствляет область видимости клинетского service worker'а, представленного в виде документа в контекте браузера, контролируемого активным worker'ом. Это особый тип объекта Client с некоторыми дополнительными методами и свойствами.

Спецификации (характеристики)

Спецификации        Статус Комментарий
Service Workers Рабочий черновик Изначальное определение.

Совместимость

Таблица совместимости

Свойства Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Базовая поддержка 40.0 44.0 (44.0)[1] Нет 24 Нет
События установки/активации 40.0 44.0 (44.0)[1] Нет (Да) Нет
Событие fetch/request/
respondWith()
40.0 44.0 (44.0)[1] Нет Нет Нет
Кеш

42.0

39.0 (39.0)[1] Нет Нет Нет
Feature Android Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Phone Opera Mobile Safari Mobile
Базовая поддержка 40.0 44.0 (44.0) (Да) Нет (Да) Нет
События установки/активации Нет 40.0 44.0 (44.0) (Да) Нет (Да) Нет
Событие fetch/request/
respondWith()
Нет 40.0 44.0 (44.0) (Да) Нет Нет Нет
Кеш Нет 40.0 39.0 (39.0) (Да) Нет Нет Нет

[1] Service workers (и Push) были отключены в  Firefox 45 Extended Support Release (ESR.)

Смотрите также: