Що таке service worker?

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

Він не має доступу до DOM, але може:

кешувати ресурси,
обробляти мережеві запити,
показувати push-сповіщення,
виконувати синхронізацію даних у фоновому режимі.

Чому це потрібно?

Service Workers використовуються для:

Офлайн-доступу (Прогресивні веб-додатки)
Швидшого завантаження через кеш
Обробки push-сповіщень
Синхронізації даних у фоновому режимі
Симуляції поведінки сервера (Mock API)

Життєвий цикл

Встановлення (install) — сервісний працівник завантажується та готує кеш.
Активація (activate) — старі дані очищуються, створюється новий кеш.
Робота (fetch) — перехоплення та обробка всіх запитів, управління кешем.
Видалення — коли не використовується, видаляється з браузера.

Приклад реєстрації Service Worker

javascript

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('SW registered:', reg))
      .catch(err => console.error('SW error:', err));
  });
}

Приклад файлу sw.js

javascript

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 в режимі розробки).
Немає доступу до window, document, localStorage.
Не підтримується в старих браузерах.

Як перевірити?

Відкрийте DevTools → Application → Service Workers
Там ви можете:

Перереєструвати SW.
Зупинити SW.
Видалити SW.

Використання з PWA

Service Worker є ключовим елементом Прогресивного веб-додатку:

Управляє офлайн-режимом
Кешує та оновлює ресурси
Забезпечує миттєве завантаження та синхронізацію в фоновому режимі

Важливо: Service Workers — це потужний, але потенційно небезпечний інструмент. Завжди забезпечуйте правильну стратегію оновлення, щоб уникнути кешування застарілих даних!

Зміст

Чому це потрібно?Життєвий циклПриклад реєстрації Service WorkerПриклад файлу sw.jsОбмеженняЯк перевірити?Використання з PWA

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань