Service worker в PWA: зачем и как

Service worker в PWA — это фоновый скрипт, без которого не будет ни офлайн-режима, ни пушей, ни самой установки приложения. Разбираем, что он делает и что из этого нужно трогать руками, а что APEX уже закрывает за вас.

Что такое service worker и где он живёт

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

Офлайн-режим: кэш вместо белого экрана

Через Cache API service worker сохраняет статику (иконки, шрифты, части интерфейса) и может отдавать её даже без сети или при нестабильном мобильном интернете. Пользователь не видит белый экран или ошибку загрузки — приложение открывается сразу, что особенно важно на гео с дорогим или медленным мобильным интернетом. Это не «оффлайн-приложение» в полном смысле, а щит от плохого соединения в момент запуска.

Пуши работают только через service worker

Web Push API устроен так, что push-событие с сервера приходит именно в service worker, а не на открытую страницу — пользователь может получить пуш, даже если PWA свёрнуто или браузер закрыт. Service worker решает, как показать уведомление (заголовок, текст, иконка, действие по клику), и куда вести пользователя после тапа. Без зарегистрированного и активного service worker пуш-движок в принципе не может доставить сообщение на устройство.

Жизненный цикл: install, activate, обновления

У service worker три ключевых этапа: install (первая регистрация и заполнение кэша), activate (переключение на новую версию) и постоянная работа в фоне, слушая fetch- и push-события. Когда меняется код воркера, браузер ставит новую версию «в ожидание» и активирует её только после закрытия всех вкладок со старой версией — из-за этого обновления PWA иногда применяются не сразу. Разработчики решают это версионированием кэша, чтобы не застрять на старой логике неделями.

Что не нужно настраивать руками в APEX

Обычному байеру не нужно писать логику кэширования, обработку fetch-событий или ретраи push-подписки самому — APEX генерирует и обслуживает service worker для каждого PWA под капотом, включая обновление версий при изменении прелендинга. Ручная работа с service worker нужна, только если вы собираете PWA вне платформы и подключаете пуш-провайдера самостоятельно.

Типичные проблемы и на что обратить внимание

Самая частая проблема — service worker зарегистрирован не с той областью (scope), из-за чего он не перехватывает нужные страницы. Вторая — HTTPS: service worker в принципе не регистрируется на обычном HTTP, кроме localhost. Третья — старая версия воркера «зависает» в кэше браузера пользователя, и обновления прелендинга не долетают, пока не пройдёт цикл activate.

Частые вопросы

Service worker и обычный JS-скрипт на странице — это одно и то же?
Нет. Обычный скрипт живёт только пока открыта страница и имеет доступ к DOM. Service worker работает в отдельном потоке в фоне, без доступа к DOM, и может действовать даже когда вкладка закрыта.
Может ли PWA получать пуши без service worker?
Нет, это архитектурно невозможно — Web Push API доставляет уведомления именно в service worker, другого способа получить пуш в фоне у браузера нет.
Почему после обновления прелендинга пользователи видят старую версию?
Скорее всего сработал стандартный жизненный цикл: новая версия service worker ждёт закрытия всех старых вкладок перед активацией. Обычно это решается новым визитом или переустановкой PWA.
Нужно ли байеру самому писать код service worker при работе в APEX?
Нет — APEX генерирует и обновляет service worker автоматически под каждый PWA, ручной код не требуется.
Работает ли service worker на iOS так же, как на Android?
Поддержка есть, но исторически более ограниченная и с более жёсткими лимитами на офлайн-кэш и push — это стоит учитывать при оценке охвата пуш-базы на iOS-трафике.
Собери своё PWA в APEX за пару минут

Клоака, антибот, пуши, сплит-тесты и свои домены — в одном сервисе.

Начать бесплатно

Читайте также