Service Worker на практике: стратегия stale-while-revalidate (+ готовый гист)

Что делает stale-while-revalidate (SWR)

Идея простая:

1. Сразу отдать то, что уже лежит в кэше (stale).

2. Параллельно сходить в сеть за свежей версией (revalidate).

3. Бесшовно обновить кэш «в фоне», чтобы следующий визит был уже со свежими данными.

Пользователь видит быстрый отклик, а мы — постоянно «подтягиваем» актуальный контент.

Когда применять SWR

• Статика: CSS/JS/шрифты/картинки (особенно CDN).

• API, не критичное к абсолютной свежести: теги, рейтинги, рекомендации.

• Производственные панели — с коротким таймаутом сети (если сеть долго молчит, вернём кэш и не «заморозим» UI).

Где не стоит: HTML-навигации. Для них лучше network-first c офлайн-фолбэком — иначе можно долго показывать устаревшие страницы.

Регистрация

<!-- register-sw.js -->
<script src="/register-sw.js" defer></script>

// register-sw.js (фрагмент)
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    const reg = await navigator.serviceWorker.register('/sw.js', { scope: '/' });

    // Уведомим страницу, что доступно обновление SW
    reg.addEventListener('updatefound', () => {
      const sw = reg.installing;
      sw?.addEventListener('statechange', () => {
        if (sw.state === 'installed' && navigator.serviceWorker.controller) {
          window.dispatchEvent(new CustomEvent('sw.update.available'));
        }
      });
    });
  });

  // По клику «Обновить» можно активировать новую версию:
  window.activateNewSW = async () => {
    const reg = await navigator.serviceWorker.getRegistration();
    reg?.waiting?.postMessage('SKIP_WAITING');
  };
}

Сам Service Worker

/* sw.js — базовая реализация SWR */
const VERSION = 'v1.0.0';
const STATIC_CACHE  = `static-${VERSION}`;
const RUNTIME_CACHE = `runtime-${VERSION}`;

const PRECACHE = ['/', '/offline.html'];

self.addEventListener('install', (e) => {
  self.skipWaiting();
  e.waitUntil(caches.open(STATIC_CACHE).then((c) => c.addAll(PRECACHE)));
});

self.addEventListener('activate', (e) => {
  e.waitUntil((async () => {
    const keep = new Set([STATIC_CACHE, RUNTIME_CACHE]);
    const keys = await caches.keys();
    await Promise.all(keys.map((k) => keep.has(k) ? null : caches.delete(k)));
    await self.clients.claim();
  })());
});

self.addEventListener('message', (e) => {
  if (e.data === 'SKIP_WAITING') self.skipWaiting();
});

self.addEventListener('fetch', (event) => {
  const req = event.request;
  if (req.method !== 'GET') return;

  const url = new URL(req.url);

  // HTML-навигации — network-first + офлайн-страница
  if (req.mode === 'navigate') {
    event.respondWith((async () => {
      try {
        const fresh = await fetch(req);
        (await caches.open(RUNTIME_CACHE)).put(req, fresh.clone());
        return fresh;
      } catch {
        return (await caches.open(STATIC_CACHE)).match('/offline.html');
      }
    })());
    return;
  }

  // Статика и API — SWR
  const isAsset = ['style','script','image','font'].includes(req.destination) ||
                  url.pathname.match(/\.(css|js|mjs|woff2?|ttf|otf|png|jpe?g|webp|avif|svg)$/i);
  const isApi = url.origin === self.location.origin && url.pathname.startsWith('/api/');

  if (isAsset || isApi) {
    event.respondWith(staleWhileRevalidate(req, RUNTIME_CACHE, {
      ignoreSearch: req.destination === 'image',
      networkTimeoutMs: isApi ? 2000 : undefined
    }));
  }
});

async function staleWhileRevalidate(request, cacheName, opts = {}) {
  const cache = await caches.open(cacheName);
  const cachedPromise = cache.match(request, { ignoreSearch: !!opts.ignoreSearch });

  const networkPromise = (async () => {
    try {
      let controller, signal;
      if (opts.networkTimeoutMs) {
        controller = new AbortController();
        signal = controller.signal;
        setTimeout(() => controller.abort(), opts.networkTimeoutMs);
      }
      const res = await fetch(request, signal ? { signal } : undefined);
      if (res && (res.ok || res.type === 'opaque')) cache.put(request, res.clone());
      return res;
    } catch { return null; }
  })();

  const cached = await cachedPromise;
  if (cached) { networkPromise; return cached; }      // мгновенно отдаём кэш
  const network = await networkPromise;               // иначе ждём сеть
  return network || new Response('', { status: 504 });
}

Серверные заголовки для sw.js

# nginx-snippet.conf
location = /sw.js {
  add_header Cache-Control "no-store, max-age=0, must-revalidate" always;
}

Отладка и наблюдение

• Chrome DevTools → Application → Service Workers: обновление, остановка, симуляция offline.

• Network → Disable cache: проверка сетевого пути без влияния HTTP-кэша.

• Application → Cache Storage: смотрим, что реально лежит в кэше SW.

• Логи: временно добавьте console.log в SW (видно в DevTools при открытой вкладке SW).

Частые тонкости и грабли

• Opaque-ответы (no-cors) кэшируются, но их нельзя читать и валидировать; решайте по политике безопасности проекта.

• Версионирование кэшей: меняйте VERSION при релизе, чистите старые кэши в activate.

• HTML и SWR — осторожно: для страниц лучше network-first, чтобы пользователь не «застрял» на старой версии.

• Квоты хранилища: на мобильных браузерах место ограничено; для картинок добавляйте экспирацию (см. Workbox или IDB-плагин).

• Правила кэширования: не кешируйте приватные ответы (личный кабинет) без явной необходимости.

Как добавить «срок годности» без Workbox

Workbox решает задачу элегантно (ExpirationPlugin), но если нужен ванильный SW, заведите мини-хранилище в IndexedDB (ключ = URL, значение = timestamp) и периодически удаляйте старые записи:

// Псевдокод: после cache.put(request, responseClone)
await idb.set(request.url, Date.now());
// где-то в activate/fetch: пробегитесь по ключам и удалите просроченные

Это 30–40 строк с idb-keyval и подходит для простых правил (maxAgeSeconds, maxEntries).

Проверка эффекта: что даст SWR

• Время до повторного отображения (повторные визиты) → резко падает.

• Нагрузка на бэкенд/CDN → снижается за счёт попадания в кэш SW.

• CWV: косвенно помогает LCP/INP на повторных сессиях (быстрее статика).

Полностью рабочий пример + Nginx-сниппет лежит в архиве:
Скачать zip
(файлы: sw.js, register-sw.js, offline.html, nginx-snippet.conf)