Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить Service Worker?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Service Worker** - це спеціальний фоновий скрипт, який браузер запускає між сторінкою і мережею, і який може перехоплювати мережеві запити, кешувати відповіді та реагувати на події (fetch, push, sync) навіть коли вкладка закрита. **Ключове:** простіше кажучи, це "проксі-сервер усередині браузера".Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Що таке Service Worker > **Service Worker** - це спеціальний фоновий скрипт, > який браузер запускає **між сторінкою і мережею**, > і який може **перехоплювати мережеві запити**, > **кешувати відповіді**, і **реагувати на події** (fetch, push, sync) > навіть коли вкладка закрита. Простіше кажучи - це "проксі-сервер усередині браузера". --- ## Як він працює (архітектурно) ```javascript ┌──────────────┐ │ Інтернет │ └──────▲───────┘ │ │ (fetch запит) ▼ ┌────────────────────┐ │ Service Worker │ ← "проксі" між сторінкою і мережею │ ├ intercept fetch()│ │ ├ serve from cache │ │ ├ push notifications│ │ └ background sync │ └────────▲────────────┘ │ │ ┌────────────────────┐ │ Вкладка сайту │ └────────────────────┘ ``` --- ## Життєвий цикл Service Worker 1. **Реєстрація** Сайт повідомляє браузеру, де знаходиться воркер: ```javascript navigator.serviceWorker.register('/sw.js'); ``` 2. **Встановлення (install)** Воркер завантажується і встановлюється (один раз). 3. **Активація (activate)** Старі версії видаляються, новий воркер стає активним. 4. **Робота (fetch / push / sync)** Після активації воркер слухає події: - `fetch` - перехоплює запити; - `push` - сповіщення; - `sync` - фонові задачі. 5. **Вимкнення (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](http://localhost)) | | Обмежений доступ до пам'яті | Є квоти на кеш | | Автоматично вивантажується | "Прокидається" за подіями, не живе постійно | --- ## Де реально використовується - **PWA (Progressive Web Apps)** - офлайн-доступ, "Додати на екран", миттєве завантаження - **Новини / чати** - push-сповіщення без відкритої вкладки - **Ігри / офлайн-режими** - завантаження ассетів і даних у кеш - **Веб-сервіси** - кеш API-відповідей, економія трафіку --- ## Проста аналогія > Уяви, що Service Worker - це **охоронець сайту** > > - стоїть "біля дверей" між сторінкою і інтернетом, > - вирішує: "віддати з кешу чи піти в мережу", > - може показувати сповіщення, > - продовжує працювати навіть коли магазин (вкладка) закрито. --- ## Підсумок | Параметр | Опис | |---|---| | **Тип** | Фоновий JS-потік між сторінкою і мережею | | **Головні функції** | Перехоплення запитів, кеш, push, background sync | | **Працює при закритій вкладці** | Так | | **Доступ до DOM** | Немає | | **Вимагає HTTPS** | Так | | **Основне застосування** | PWA, офлайн-режим, сповіщення |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.