Уявіть, що ви пишете текст у Google Docs, і раптом зникає інтернет. Ви перезавантажуєте сторінку, але весь текст збережено, і ви можете продовжувати роботу. Це можливо завдяки Service Workers — потужному механізму браузера, що дозволяє вебдодаткам працювати офлайн.
🔹Що таке Service Worker?
Це окремий фоновий скрипт, що перехоплює запити, кешує ресурси та навіть дозволяє оновлювати дані без активного з’єднання з сервером. Він не має доступу до DOM, але контролює мережеві запити та взаємодіє з кешем.
🔹Як Service Worker працює з кешем?
Основний принцип — кешування файлів для роботи без інтернету. Під час встановлення Service Worker завантажує важливі ресурси, такі як HTML, CSS і JS, у локальний кеш. А коли користувач відкриває сторінку, вона може завантажуватися не із сервера, а з кешу.
🔹 Життєвий цикл Service Worker
1️⃣ Реєстрація — додаємо Service Worker у код:
navigator.serviceWorker.register('/service-worker.js')
.then(reg => console.log('Registered:', reg.scope))
.catch(err => console.log('Registration failed:', err));
2️⃣ Встановлення — кешування ресурсів для офлайн-роботи:
self.addEventListener('install', event => {
event.waitUntil(
caches.open('v1').then(cache =>
cache.addAll(['/index.html', '/styles.css', '/script.js'])
)
);
});
3️⃣ Активація — видалення застарілих кешів після оновлення:
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(keys =>
Promise.all(keys.filter(key => key !== 'v1').map(key => caches.delete(key)))
)
);
});
4️⃣ Перехоплення запитів — використання кешу замість сервера:
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => response || fetch(event.request))
);
});
🔹Додаткові можливості
✅ Фонова синхронізація – дозволяє відправляти дані, коли з’явиться інтернет.
✅ Push-сповіщення – надсилає повідомлення без активного вікна браузера.
✅ Перехоплення та модифікація запитів – змінює відповіді API або додає новий контент.
Service Workers — це інструмент, що робить вебдодатки незалежними від з’єднання, покращуючи UX і продуктивність. Завдяки кешуванню, фоновій синхронізації та push-сповіщенням вони відкривають нові можливості для веброзробки.
#поради_itcat