Как работает кэширование через Service Worker

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

Основные этапы:

1. Регистрация Service Worker в основном JS-файле:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

2. В файле sw.js обработка событий:

• install — кэширование статических ресурсов при первой установке
• fetch — перехват запросов и возврат из кэша при наличии

Пример стратегии Cache First:

self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll(['/styles.css', '/script.js']);
    })
  );
});

self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then((response) => {
      return response || fetch(e.request);
    })
  );
});

Особенности:

• Работает только по HTTPS (кроме localhost)
• Жизненный цикл управляется браузером
• Может обновляться только при изменении файла SW