Регистрация и жизненный цикл сервис-воркера
Зарегистрируйте скрипт сервис-воркера, изучите события жизненного цикла install, activate и fetch и используйте skipWaiting и clients.claim
«Регистрация и жизненный цикл сервис-воркера» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Что такое сервис-воркер?
Сервис-воркер — это JavaScript-файл, который выполняется в отдельном рабочем потоке браузера (не в основном потоке) и перехватывает сетевые запросы к Вашему источнику. Это основа автономной работы PWA, push-уведомлений и фоновой синхронизации.
Регистрация сервис-воркера
Зарегистрируйте его в основном скрипте. Для сервис-воркеров требуется HTTPS (кроме localhost).
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js', { scope: '/' })
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.error('SW registration failed:', err));
});
}Область действия
Сервис-воркер управляет запросами в пределах своей области действия (каталога, из которого он обслуживается). /sw.js в корне управляет всем сайтом. Сервис-воркер в /app/sw.js управляет только /app/*.
Жизненный цикл: установка → активация → получение запросов
Три основных события: install (однократно, настройка кэшей), activate (однократно, очистка старых кэшей), fetch (для каждого запроса — выбор между кэшем и сетью).
// sw.js
self.addEventListener('install', (event) => {
console.log('SW installing');
event.waitUntil(
caches.open('v1').then(cache =>
cache.addAll(['/', '/index.html', '/styles.css', '/app.js'])
)
);
});
self.addEventListener('activate', (event) => {
console.log('SW active');
event.waitUntil(
caches.keys().then(keys =>
Promise.all(keys.filter(k => k !== 'v1').map(k => caches.delete(k)))
)
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(res => res || fetch(event.request))
);
});skipWaiting()
По умолчанию обновлённый сервис-воркер ожидает закрытия всех вкладок перед активацией. self.skipWaiting() в обработчике установки принудительно активирует его сразу — обновления происходят быстрее, но возникает риск смешивания старых и новых ресурсов.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate immediately on next reload
// ... cache setup
});clients.claim()
После активации новый сервис-воркер не управляет страницами, загруженными до неё. self.clients.claim() в обработчике активации немедленно передаёт ему управление.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});Обновление сервис-воркера
Браузеры проверяют новый sw.js при каждой навигации (максимальный срок хранения — 24 часа). Если содержимое файла изменилось (отличается хотя бы одним байтом), он устанавливается как новый сервис-воркер и ожидает активации. Перезагрузите страницу, чтобы запустить активацию.
Обнаружение обновлений в приложении
Слушайте событие updatefound, чтобы показать запрос на обновление.
navigator.serviceWorker.register('/sw.js').then(reg => {
reg.addEventListener('updatefound', () => {
const newSW = reg.installing;
newSW.addEventListener('statechange', () => {
if (newSW.state === 'installed' && navigator.serviceWorker.controller) {
// New version ready
showUpdateBanner(() => {
newSW.postMessage('SKIP_WAITING');
window.location.reload();
});
}
});
});
});Отмена регистрации
Чтобы остановить вышедший из-под контроля сервис-воркер (например, из-за ошибки разработки), отмените его регистрацию.
navigator.serviceWorker.getRegistrations().then(regs => {
for (const reg of regs) reg.unregister();
});Инструменты разработчика браузера
В Chrome DevTools → Application → Service Workers отображается зарегистрированный сервис-воркер; здесь можно отменить его регистрацию, включить имитацию обновления при перезагрузке и пошагово просмотреть события жизненного цикла.
Распространённые ошибки
1) Файл сервис-воркера должен находиться в корневой области действия или выше неё. 2) Требуется HTTPS. 3) При разработке изменения сервис-воркера требуют полной перезагрузки. 4) Кэшируйте один раз и обновляйте ресурсы с помощью версионирования, а не бесконечного роста кэша. 5) Не кэшируйте запросы POST (они не поддерживаются).
Workbox — библиотека для повышения продуктивности
Workbox от Google скрывает детали жизненного цикла и предоставляет готовые стратегии кэширования. В большинстве производственных PWA используют Workbox, а не написанный вручную код сервис-воркера.
Быстрая проверка
Что делает self.skipWaiting() в обработчике install сервис-воркера?
Повторение: жизненный цикл сервис-воркера
Рабочий поток JavaScript, перехватывающий сетевые запросы к Вашему источнику. Регистрация выполняется через navigator.serviceWorker.register. Жизненный цикл: установка (настройка кэшей), активация (очистка), получение запросов (перехват запросов). skipWaiting и clients.claim обеспечивают немедленные обновления. Слушайте updatefound, чтобы предложить пользователям обновиться. Workbox скрывает шаблонный код. Требуется HTTPS (кроме localhost).
Часто задаваемые вопросы
Урок «Регистрация и жизненный цикл сервис-воркера» бесплатный?
Да — полный текст урока «Регистрация и жизненный цикл сервис-воркера» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Регистрация и жизненный цикл сервис-воркера»?
Зарегистрируйте скрипт сервис-воркера, изучите события жизненного цикла install, activate и fetch и используйте skipWaiting и clients.claim Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Регистрация и жизненный цикл сервис-воркера»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Манифест веб-приложения
- Регистрация и жизненный цикл сервис-воркера
- Стратегии офлайн-кэширования: CacheFirst и NetworkFirst
- Push-уведомления