Service Worker
Service Worker - это программная технология, представляющая собой скрипт, который браузер запускает в фоновом режиме отдельно от веб-страницы. Service Worker выступает в роли прокси-сервера между веб-приложением, браузером и сетью, перехватывая и обрабатывая сетевые запросы.
В интернет-маркетинге service workers используются для создания прогрессивных веб-приложений (PWA), которые обеспечивают быструю загрузку, работу офлайн и отправку push-уведомлений, что повышает вовлечённость пользователей.
Что такое Service Worker
[править]Service Worker - это тип веб-воркера (web worker), который:
- Работает в отдельном потоке, не блокируя основной интерфейс страницы.
- Не имеет доступа к DOM.
- Полностью асинхронный (синхронные API недоступны).
- Работает только по HTTPS (кроме localhost для разработки).
Жизненный цикл Service Worker
[править]1. Регистрация
[править]Скрипт регистрируется из основного JavaScript-файла страницы:
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
2. Загрузка и установка
[править]После регистрации браузер загружает файл service-worker.js. Если файл новый или отличается от существующего, происходит установка. В событии install обычно кэшируются статические ресурсы.
self.addEventListener('install', event => {
event.waitUntil(
caches.open('my-cache-v1').then(cache => {
return cache.addAll(['/', '/styles.css', '/script.js']);
})
);
});
3. Активация
[править]Если уже есть активный service worker, новый переходит в состояние ожидания и активируется только после закрытия всех страниц, использующих старую версию. В событии activate обычно удаляются старые кэши.
4. Обработка запросов
[править]Активный service worker перехватывает все сетевые запросы от страницы и может решать, брать ли ответ из кэша, из сети или комбинировать.
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
Возможности Service Worker
[править]- Офлайн-режим. Кэширование ресурсов позволяет приложению работать без интернета.
- Push-уведомления. Получение уведомлений даже когда страница не открыта.
- Фоновая синхронизация. Отправка данных на сервер после восстановления соединения.
- Предзагрузка ресурсов. Загрузка контента, который пользователю может понадобиться в ближайшее время.
- API mocking. Эмуляция API-ответов для разработки и тестирования.
Стратегии кэширования
[править]При разработке Service Worker можно применять различные стратегии кэширования:
- Cache First (Сначала кэш): В первую очередь ищет ресурс в кэше, и только если его там нет, обращается к сети. Идеально для статических ресурсов (CSS, JS, изображения).
- Network First (Сначала сеть): Пытается загрузить ресурс из сети, и только при неудаче обращается к кэшу. Подходит для контента, который должен быть актуальным (например, статьи, данные профиля).
- Stale-While-Revalidate (Устаревшее с проверкой): Мгновенно возвращает ресурс из кэша, но одновременно запрашивает обновлённую версию из сети для следующего использования. Отличный баланс между скоростью и актуальностью.
Роль в PWA
[править]Service Workers играют ключевую роль в прогрессивных веб-приложениях (PWA), обеспечивая:
- Мгновенную загрузку при повторных посещениях (за счёт кэша).
- Полноценную работу в офлайн-режиме.
- Возможность установки приложения на устройство.
- Push-уведомления для вовлечения пользователей.
Ограничения
[править]- Требуется HTTPS.
- Не работают в старых браузерах.
- Не имеют доступа к DOM.
- Сложнее в отладке, чем обычный JavaScript.
