Что такое Service Worker?

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

Он не имеет доступа к DOM, но может:

• кэшировать ресурсы,
• обрабатывать сетевые запросы,
• показывать push-уведомления,
• выполнять фоновую синхронизацию данных.

Зачем нужен?

Service Workers используются для:

• Офлайн-доступа (Progressive Web Apps)
• Ускорения загрузки через кэш
• Обработки push-уведомлений
• Фоновой синхронизации данных
• Имитации серверного поведения (Mock API)

Жизненный цикл

1. Установка (install) — сервис-воркер загружается и подготавливает кэш.
2. Активация (activate) — очищаются старые данные, создаётся новый кэш.
3. Работа (fetch) — перехват и обработка всех запросов, управление кэшем.
4. Удаление — когда не используется, удаляется из браузера.

Пример регистрации Service Worker

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('SW зарегистрирован:', reg))
      .catch(err => console.error('SW ошибка:', err));
  });
}

Пример файла sw.js

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll(['/index.html', '/styles.css', '/script.js']);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => {
      return cached || fetch(event.request);
    })
  );
});

Ограничения

• Работают только по HTTPS (или localhost в dev-режиме).
• Нет доступа к window, document, localStorage.
• Не поддерживаются в старых браузерах.

Как проверить?

Открой DevTools → Application → Service Workers Там можно:

• Перезарегистрировать SW.
• Остановить SW.
• Удалить SW.

Использование с PWA

Service Worker — ключевой элемент Progressive Web App:

• Управляет офлайн-режимом
• Кэширует и обновляет ресурсы
• Обеспечивает мгновенную загрузку и фоновую синхронизацию