Що робить Service Worker?

JavaScriptSenior~2 хв читання

Що таке Service Worker

Service Worker - це спеціальний фоновий скрипт, який браузер запускає між сторінкою і мережею, і який може перехоплювати мережеві запити, кешувати відповіді, і реагувати на події (fetch, push, sync) навіть коли вкладка закрита.

Простіше кажучи - це "проксі-сервер усередині браузера".

Як він працює (архітектурно)

javascript

┌──────────────┐
│   Інтернет   │
└──────▲───────┘
       │
       │  (fetch запит)
       ▼
┌────────────────────┐
│  Service Worker     │ ← "проксі" між сторінкою і мережею
│  ├ intercept fetch()│
│  ├ serve from cache │
│  ├ push notifications│
│  └ background sync  │
└────────▲────────────┘
         │
         │
┌────────────────────┐
│   Вкладка сайту    │
└────────────────────┘

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

Реєстрація Сайт повідомляє браузеру, де знаходиться воркер:

javascript

navigator.serviceWorker.register('/sw.js');

Встановлення (install) Воркер завантажується і встановлюється (один раз).
Активація (activate) Старі версії видаляються, новий воркер стає активним.
Робота (fetch / push / sync) Після активації воркер слухає події:

fetch - перехоплює запити;
push - сповіщення;
sync - фонові задачі.

Вимкнення (idle / terminate) Коли не використовується - браузер вивантажує його з пам'яті, і запускає заново при наступній події.

Приклад: базовий Service Worker

sw.js

javascript

self.addEventListener('install', (event) => {
  console.log('Service Worker встановлюється...');
  event.waitUntil(
    caches.open('v1').then(cache => cache.addAll([
      '/',
      '/index.html',
      '/styles.css',
      '/app.js'
    ]))
  );
});

self.addEventListener('activate', () => {
  console.log('Service Worker активовано!');
});

self.addEventListener('fetch', (event) => {
  console.log('Перехоплено запит:', event.request.url);
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request); // з кешу або з мережі
    })
  );
});

Цей SW:

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

Приклад реєстрації в основному коді

javascript

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(() => console.log('SW зареєстровано'))
    .catch(console.error);
}

Основні можливості Service Worker

Можливість	Що робить
Fetch interception	Перехоплює і контролює всі мережеві запити
Caching API	Зберігає файли й відповіді в кеші (робота офлайн)
Background sync	Виконує задачі, коли мережа відновиться
Push notifications	Отримує пуш-сповіщення від сервера
Offline-first	Дозволяє сайту працювати без інтернету
Periodic sync	Виконує дії за розкладом
Proxy layer	Підвищує безпеку (контроль запитів і відповідей)

Приклад офлайн-сторінки

javascript

self.addEventListener('fetch', (event) => {
  event.respondWith(
    fetch(event.request).catch(() => caches.match('/offline.html'))
  );
});

Якщо немає інтернету - повертає /offline.html -> сайт не падає, а показує "Ви офлайн".

Push-сповіщення

javascript

self.addEventListener('push', (event) => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: '/icon.png'
    })
  );
});

Працює навіть якщо вкладка закрита - браузер "будить" Service Worker для обробки push.

Background Sync

Дозволяє виконувати відкладені задачі, коли з'явиться мережа:

javascript

self.addEventListener('sync', (event) => {
  if (event.tag === 'sendFormData') {
    event.waitUntil(sendDataToServer());
  }
});

Наприклад, користувач офлайн - дані зберігаються в IndexedDB, а потім, коли мережа відновиться, Service Worker сам відправить їх на сервер.

Обмеження

Особливість	Опис
Ізольований від DOM	Немає `window`, `document`
Тільки HTTPS	Працює лише на захищених доменах (або localhost)
Обмежений доступ до пам'яті	Є квоти на кеш
Автоматично вивантажується	"Прокидається" за подіями, не живе постійно

Де реально використовується

PWA (Progressive Web Apps)
офлайн-доступ, "Додати на екран", миттєве завантаження
Новини / чати
push-сповіщення без відкритої вкладки
Ігри / офлайн-режими
завантаження ассетів і даних у кеш
Веб-сервіси
кеш API-відповідей, економія трафіку

Проста аналогія

Уяви, що Service Worker - це охоронець сайту

стоїть "біля дверей" між сторінкою і інтернетом,

вирішує: "віддати з кешу чи піти в мережу",

може показувати сповіщення,

продовжує працювати навіть коли магазин (вкладка) закрито.

Підсумок

Параметр	Опис
Тип	Фоновий JS-потік між сторінкою і мережею
Головні функції	Перехоплення запитів, кеш, push, background sync
Працює при закритій вкладці	Так
Доступ до DOM	Немає
Вимагає HTTPS	Так
Основне застосування	PWA, офлайн-режим, сповіщення

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

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

Premium

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