This page was translated from English by the community.Learn more and join the MDN Web Docs community.
Service Worker API
Service worker фактически выполняет роль прокси-сервера, находящегося между веб-приложением и браузером, а также сетью (если доступна). Он позволяет (кроме прочего) описывать корректное поведение веб-приложения в режиме офлайн, перехватывать запросы сети и принимать соответствующие меры, основываясь на доступности сети, и обновлять данные, находящиеся на сервере при доступе к нему. Также они имеют доступ к push-уведомлениям и API для фоновой синхронизации.
In this article
Концепция и использование Service Worker
Service worker — это событийно-управляемыйworker, регистрируемый на уровне источника и пути. Он представляет собой JavaScript-файл, который может контролировать веб-страницу/сайт, с которым он ассоциируется, перехватывать и модифицировать запросы навигации и ресурсов, очень гибко кешировать ресурсы, для того чтобы предоставить вам полный контроль над тем, как приложение ведёт себя в определённых ситуациях (например, когда сеть не доступна).
Service 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 будет следовать следующему жизненному циклу:
- Загрузка
- Установка
- Активация
Когда пользователь впервые запросит доступ к сайту/странице, контролируемой Service Worker'ом, тот моментально будет загружен .
После этого он будет загружаться каждые 24 часа или около того. Онможет загружаться и чаще, но ондолжен загружаться как минимум каждые 24 часа, чтобы предотвратить использование старой версии кода клиентом.
Установка производится в случае если загружаемый файл признается новым — либо отличным от уже установленного service worker (определяется через побайтовое сравнение), либо первым устанавливаемым service воркером для этой страницы/сайта.
Если это первый раз, когда service worker оказался доступен, будет проведена установка, а после успешного её завершения — активация.
Если service worker уже существует, новая версия устанавливается в фоновом режиме, но не активируется — worker переходит в состояниев ожидании. Новая версия активируется только тогда, когда больше не останется загруженных страниц, использующих старый service worker. Как только это случится, новый service 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, который контролируется активным воркером.ClientsПредставляет контейнер для списка объектов
Client; основной способ получить доступ к клиентам активного service worker'а текущего источника.ExtendableEventРасширяет жизненный цикл событий
installиactivate, отправляемыхServiceWorkerGlobalScopeкак часть жизненного цикла service worker'а. Это гарантирует, что любое функциональное событие (какFetchEvent) не отправится вServiceWorker, пока он не обновит шаблон данных, удалив устаревшие данные кеша.ExtendableMessageEventОбъект событий
messageзапускается в service worker (когда канал сообщений вServiceWorkerGlobalScopeполучил новое сообщение из другого контекста) — расширяет жизненный цикл таких событий.FetchEventПараметр, передающийся в обработчик
ServiceWorkerGlobalScope.onfetch,FetchEventпредставляет собой событие получения, которое отправляется вServiceWorkerGlobalScopeServiceWorker. Он содержит информацию о запросе и результирующем ответе и обеспечиваетFetchEvent.respondWith()метод, который позволяет отправить произвольный ответ обратно контролируемой странице.InstallEventПараметр, передающийся в
oninstallобработчик,InstallEventпредставляет собой событие установки, которое отправляетсяServiceWorkerGlobalScopeServiceWorker. Как наследникExtendableEvent, он гарантирует, что функциональные события, такие какFetchEvent, не будут отправлены во время установки.Navigator.serviceWorkerВозвращает объект
ServiceWorkerContainer, который обеспечивает доступ к регистрации, удалению, обновлению и коммуникации с объектамиServiceWorkerассоциируемого документа.NotificationEventПараметр, передаваемый в обработчик
onnotificationclick, интерфейсNotificationEventпредставляет событие уведомления на клик, которое отправляется вServiceWorkerGlobalScopeservice worker'а.ServiceWorkerПредставляет service worker. Несколько контекстов браузера (страницы, worker'ы, и т.д.) могут быть ассоциированы с одним объектом
ServiceWorker.ServiceWorkerContainerПредоставляет объект, описывающий service worker как общий блок в экосистеме сети, включая возможность регистрировать, отключать и обновлять service worker'ы, и предоставляет доступ к состоянию текущего и других зарегистрированных service воркеров.
ServiceWorkerGlobalScopeПредставляет глобальный контекст исполнения service worker'а.
ServiceWorkerMessageEventСодержит информацию о событии, отправленном целевому
ServiceWorkerContainer.ServiceWorkerRegistrationПредставляет регистрацию service worker'а.
SyncEventНе стандартноSyncEvent представляет синхронное действие, которое отправляется
ServiceWorkerGlobalScopeServiceWorker.SyncManagerНе стандартноОбеспечивает интерфейс регистрации и перечисления синхронных регистрации.
WindowClientПредставляет область видимости клиентского service worker'а, представленного в виде документа в контакте браузера, контролируемого активным воркером. Это особый тип объекта
Clientс некоторыми дополнительными методами и свойствами.
Спецификации
| Specification |
|---|
| Service Workers Nightly> |
Совместимость с браузерами
>Смотрите также
- Кулинарная книгаServiceWorker
- ИспользованиеService Workers
- Основные примеры кодаService workers
- Готов лиServiceWorker?
- Перспектива
- Using web workers