З якою метою може бути використаний event listener події fetch self.addEventListener(’fetch’, event => {}) ?

Повне пояснення

Що це і навіщо

• fetch‑listener – це обробник події у Service Worker, який реагує на кожен HTTP‑запит, що надходить з веб‑сторінки.
• Його основна мета – забезпечити контроль над мережевим трафіком: кешування, модифікація запитів/відповідей, офлайн‑режим, аутентифікація тощо.

Ключові принципи/терміни

• Service Worker – background‑скрипт, що працює окремо від UI.
• event.request – об’єкт Request, що містить URL, метод, заголовки.
• event.respondWith() – спосіб повернути власну Response.

Як це працює

1. Коли сторінка робить fetch, браузер передає запит Service Worker.
2. Listener виконується, отримує event з request і respondWith.
3. Можна перевірити кеш, змінити заголовки або відправити новий запит.

Практика і реалізація (JavaScript)

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(fetch(event.request)); // просто проксі
  } else {
    event.respondWith(caches.match(event.request).then(res => res || fetch(event.request)));
  }
});

Тестування – можна використовувати jest з service-worker-mock або workbox-build для генерації моків.

Безпека – переконайтеся, що не передаєте конфіденційні дані у заголовках без шифрування, і обмежте доступ до API за допомогою CORS.

Оптимізація – кешуйте статичні ресурси, використовуйте Cache First або Network First політики залежно від типу контенту.

Часті помилки – забуваєте викликати event.respondWith(), що призводить до блокування запиту; не перевіряєте event.request.mode для CORS‑запитів.

Чеклист діагностики

• Симптом: запити не виконуються.
• Причина: respondWith не викликано або повертається неправильний Response.
• Дія: перевірити логіку у listener‑і, додати console.log(event.request.url).

Альтернативи – можна використовувати проксі‑сервер (наприклад, Nginx) або бібліотеку axios з інтерцепторами для клієнтської частини, але Service Worker дає контроль на рівні браузера без мережевих налаштувань.