Service Workers

Офлайн-доступ: не просто теория, а работающий кэш

Service Worker позволяет вашему приложению загружаться без интернета. Это не «магия» — это стратегия кэширования. Вы получите готовый сценарий: сначала приоритет кэша (Cache First), затем сеть. После курса вы сможете настроить так, чтобы статика (HTML, CSS, JS) отдавалась из кэша за 5–15 мс, а не за 200–800 мс с сервера.

Конкретный пример: мы разбираем кейс интернет-магазина, где каталог товаров открывается в офлайне. Вы узнаете, как хранить до 10 000 записей в IndexedDB и синхронизировать их при восстановлении соединения. Типичная ошибка новичка — кэшировать всё подряд. На курсе вы научитесь выбирать только критический контент.

• Cache First для статики — время загрузки падает с 300 мс до 10 мс.
• Network First для данных — вы всегда получаете свежий прайс, но показываете кэш при ошибке.
• Stale-While-Revalidate для изображений — пользователь видит старую картинку мгновенно, а новая загружается в фоне.
• Ограничение размера кэша через Cache Storage API — не более 50 МБ, чтобы не переполнить диск.

Вы получите шаблоны обработки запросов: fetch-перехватчики, обработка ошибок 404 и 503, логирование попаданий в кэш. Это не абстрактные примеры — это готовый код, который вы вставите в проект за 10 минут.

Пуш-уведомления: реальная вовлечённость пользователей

Service Worker — единственный способ отправлять веб-пуш-уведомления на десктоп и мобильные устройства. Вы получите полный цикл: генерация VAPID-ключа, подписка пользователя, отправка через Firebase Cloud Messaging или свой сервер. Конкретные цифры: пуш-уведомления повышают возврат пользователей на 25–40% в первые 30 дней после подписки.

На курсе мы разбираем две стратегии: уведомления о брошенной корзине (до 8% конверсии) и анонсы новинок (до 12% кликов). Типичная ошибка — рассылать слишком часто. Вы узнаете, как настроить частоту через сервис-воркер: не более 2 уведомлений в неделю на пользователя.

Практическое задание: вы создаёте кнопку «Разрешить уведомления» и обрабатываете событие push. Результат — работающий прототип с аналитикой кликов. Без Service Worker это невозможно — пуш-уведомления работают только в фоне, через воркер.

• VAPID-ключи: генерация за 1 минуту через web-push библиотеку.
• Подписка: navigator.serviceWorker.register и PushManager.subscribe.
• Событие push: парсинг payload, отображение уведомления с иконкой и action-кнопками.
• Аналитика: отслеживание кликов через event.waitUntil для записи в Google Analytics.

Вы получите шаблон уведомления с изображением, текстом и ссылкой. Это не демо — это готовый компонент для магазина или новостного сайта.

Производительность: ускорение загрузки в 2–5 раз

Service Worker — это не только офлайн, но и производительность. Вы получите механизм предзагрузки: он позволяет загружать страницу до проверки кэша. Это даёт выигрыш 200–500 мс на первом запросе. Конкретная цифра: после курса вы сократите время до интерактива (TTI) с 4 секунд до 1,2 секунды для типового лендинга.

Мы разбираем кейс: лента новостей с 50 изображениями. Без Service Worker — 12 секунд загрузки. С кэшем и lazy loading — 2,8 секунды. Ваш инструмент: Cache-Control + service worker fetch. Типичная ошибка — не проверять версию кэша. Вы получите механизм версионирования: изменяете CACHE_NAME, старые кэши удаляются автоматически.

Дополнительно: вы научитесь интегрировать Service Worker с Webpack через Workbox. Workbox генерирует воркер за 3 минуты: выбираете стратегии, указываете исключения (например, API-запросы к платежному шлюзу не кэшировать). На выходе — конфигурация, которая уменьшает размер бандла на 40% за счёт исключения ненужных файлов.

1. Шаг 1: Установка Workbox CLI и инициализация конфига.
2. Шаг 2: Настройка глобальных стратегий для CSS, JS, изображений.
3. Шаг 3: Добавление runtime-кэша для API-запросов с TTL 10 минут.
4. Шаг 4: Тестирование через Lighthouse — целевой показатель Performance 90+.
5. Шаг 5: Деплой — встроенный CDN-кеш дублируется Service Worker.

Вы получите не просто код — вы получите измеримый результат. После курса вы сможете аргументированно ответить: «Без Service Worker ваш сайт теряет до 30% мобильных пользователей из-за медленной загрузки».

Сложные сценарии: обработка ошибок и синхронизация

Service Worker не только кэширует, но и обрабатывает сбои сети. Вы получите паттерн «офлайн-форма»: пользователь заполняет форму без интернета, данные сохраняются в IndexedDB, а при восстановлении связи отправляются автоматически. Типичная ошибка — не обрабатывать конфликты: если сервер изменил данные, нужно сравнить по временной метке. На курсе вы реализуете это за 20 строк кода.

Пример из практики: CRM-система для курьеров. При плохой связи заказы сохраняются локально, отправляются при появлении сигнала. Результат: потери данных снижены с 15% до 0,5%. Вы узнаете, как использовать Background Sync API для отсроченной отправки. Это даёт приоритет: сначала пуш-уведомления, потом синхронизация, потом кэш.

Ещё один сценарий — обработка ошибок 503. Service Worker может показывать кастомную страницу «Сервер временно недоступен», а не стандартную ошибку браузера. Вы получите шаблон: перехват ответа, проверка статуса, возврат fallback-контента. Это повышает юзабилити — пользователь остаётся на сайте, а не уходит в Google.

• IndexedDB для форм: схема таблицы, индексы для быстрого поиска.
• Background Sync: регистрация события sync, обработка в воркере.
• Fallback-страница: HTML-шаблон в кэше, отображается только при ошибке.
• Логирование ошибок: запись в localStorage для последующей отправки на сервер.

Вы научитесь отличать Service Worker от просто кэша. Service Worker — это программа, которая живёт в фоне, а не статический файл. После курса вы сможете объяснить разницу на примерах: «Кэш Server-side не даст вам офлайн-формы, а Service Worker — даст».

Типичные ошибки и как их избежать: проверенный чек-лист

Большинство разработчиков допускают одну из трёх ошибок: не обновляют Service Worker, кэшируют динамический контент или забывают про отмену регистрации при устаревании. Вы получите чек-лист из 7 пунктов, который предотвращает 90% багов. Конкретный пример: настройка skipWaiting() и clients.claim() — без них новая версия воркера не активируется до обновления страницы.

Вторая частая ошибка — не тестировать в офлайн-режиме. После курса вы будете использовать DevTools → Application → Service Workers → Offline. Вы увидите, какие запросы падают, и скорректируете стратегии. Мы разбираем кейс: интернет-магазин, где офлайн-режим отключает корзину. Решение — кэшировать минимальный набор товаров, а корзину сохранять в IndexedDB.

Третья ошибка — не обрабатывать обновления Service Worker. Без события install с удалением старых кэшей пользователь будет видеть устаревшую версию сайта. Вы получите стандартный паттерн: верификация версии, очистка, активация. На курсе мы показываем, как добавить кнопку «Обновить сейчас» для пользователей.

• Проверка: event.waitUntil(self.skipWaiting()) в install.
• Очистка: caches.keys() → caches.delete(старый кэш).
• Активация: clients.claim() для немедленного захвата страниц.
• Логирование: console.log('SW версия 2.1 активирована').
• Тест: загрузка сайта с выключенным Wi-Fi.
• Fallback: если кэш пуст, показывать сообщение «Нет интернета».
• Мониторинг: проверка версии через navigator.serviceWorker.controller.

После прохождения курса вы сможете с нуля развернуть Service Worker для любого проекта — от блога до SaaS. Вы получите не шаблонные ответы, а конкретные решения с цифрами. Это не общая лекция — это практический инструмент, который вы примените в понедельник утром.

Добавлено: 23.04.2026