Что такое Service Worker

Урок объясняет, что такое Service Worker, как он работает как прокси и почему живёт в отдельном потоке.

Service Worker — это JavaScript-скрипт, который браузер запускает в фоне, отдельно от страницы, и который выступает программируемым прокси между вашим приложением и сетью.

Прокси между приложением и сетью

Обычно, когда страница запрашивает картинку или данные, запрос идёт напрямую в сеть. Service Worker встаёт посередине: каждый сетевой запрос проходит через него, и он решает, что делать — сходить в сеть, отдать из кеша или вернуть запасной ответ. Именно эта способность перехватывать запросы делает возможным офлайн-режим.

Без Service Worker:
  Страница ---------------> Сеть ----> Сервер

С Service Worker:
  Страница --> Service Worker --> Кеш или Сеть --> Сервер
                    |
                    +--> может ответить из кеша офлайн

Отдельный поток

Service Worker работает не в том потоке, где исполняется код страницы, а в отдельном (это разновидность Web Worker). Из этого следуют важные свойства:

• Он не имеет доступа к DOM — не может напрямую менять страницу. Общается со страницей через сообщения (postMessage).
• Он живёт независимо от вкладок: может работать, даже когда страница закрыта (например, для push-уведомлений).
• Он может быть остановлен и снова запущен браузером в любой момент — поэтому нельзя хранить состояние в обычных переменных, оно потеряется.

Что Service Worker умеет

Как работает под капотом

Service Worker событийно-ориентирован. Браузер не держит его постоянно запущенным — это экономило бы заряд и память впустую. Вместо этого браузер «будит» Service Worker, когда происходит событие: пришёл сетевой запрос (fetch), пришло push-уведомление (push), настало время синхронизации (sync). Service Worker обрабатывает событие и снова «засыпает». Поэтому код Service Worker — это в основном обработчики событий addEventListener('install', ...), addEventListener('fetch', ...) и т.д.

Поддержка

Прежде чем использовать Service Worker, проверяют его поддержку браузером. Это пример прогрессивного улучшения: где есть — включаем, где нет — сайт всё равно работает.

if ('serviceWorker' in navigator) {
  // браузер поддерживает Service Worker — регистрируем
}

Частые ошибки

• Пытаться обратиться к DOM из Service Worker. Там нет document и window — будет ошибка.
• Хранить данные в глобальных переменных. Service Worker могут выгрузить, и переменные обнулятся. Состояние храните в Cache или IndexedDB.
• Думать, что Service Worker всегда запущен. Он просыпается под событие и засыпает.

Итоги

• Service Worker — фоновый скрипт-прокси между приложением и сетью.
• Работает в отдельном потоке, без доступа к DOM, общается через сообщения.
• Событийный: просыпается под fetch, push, sync и засыпает.
• Состояние нельзя держать в переменных — только в кеше или IndexedDB.