PWA гайд

Service Worker - шпаргалка

Короткий практический справочник: жизненный цикл, fetch и стратегии кэша, которые работают в реальных проектах на Chrome и Safari.

Все материалы

1. Что это

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

Регистрация со страницы:

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

2. Жизненный цикл

СобытиеКогдаЧто делать
installSW скачан впервые / обновлёнPrecache app shell (HTML/CSS/JS/иконки)
activateСтарый SW ушёл, новый взял контрольУдалить старые кэши
fetchСтраница или worker запросили URLОтдать cache, network или оба
messageСтраница пишет в SWskipWaiting / свои команды

3. Минимальный каркас SW

const CACHE = 'app-v1';
const PRECACHE = ['/', '/offline.html', '/static/app.css', '/static/app.js'];

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

self.addEventListener('activate', (event) => {
  event.waitUntil((async () => {
    const keys = await caches.keys();
    await Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)));
    await self.clients.claim();
  })());
});

self.addEventListener('fetch', (event) => {
  if (event.request.method !== 'GET') return;
  event.respondWith((async () => {
    const cached = await caches.match(event.request);
    if (cached) return cached;
    try {
      const fresh = await fetch(event.request);
      const cache = await caches.open(CACHE);
      cache.put(event.request, fresh.clone());
      return fresh;
    } catch {
      return caches.match('/offline.html');
    }
  })());
});

4. Стратегии кэша

СтратегияДля чегоИдея
Cache FirstCSS, JS, шрифты, иконкиСначала кэш, сеть только при miss
Network FirstHTML, API JSONСначала сеть, иначе кэш
Stale While RevalidateПочти свежий контентОтдать кэш сразу, обновить фоном
Network OnlyОплата, authКэш не использовать

5. Chrome vs Safari

ТемаChrome / ChromiumSafari / iOS
SW + Cache APIОтличная поддержкаЕсть, но со лимитами хранилища
Background syncЕстьОграничено / часто недоступно
Очистка данныхОбычно стабильно у установленных PWAМожет чистить агрессивнее
HTTPSОбязателен (localhost ок)Обязателен

6. Частые ошибки

  • Случайно кэшировать POST / auth-ответы.
  • Не поднимать версию кэша - пользователи навсегда на старом JS.
  • Precache огромных картинок на install - установка тормозит.
  • Нет offline-fallback для навигации.