Стратегии Service Worker для работы без сети

Service Worker — это сетевой посредник в PWA. Каждый запрос проходит через него. Стратегия — это правило: что отдавать пользователю — кеш, сеть или комбинацию.

Cache-first

Сначала смотрим в кеш, если есть — отдаём. Сеть только если кеша нет.

• Когда: статика (CSS, JS, шрифты, иконки), которая редко меняется
• Плюс: моментальный ответ, работает оффлайн
• Минус: пользователь может видеть устаревшую версию долго
• Решение: cache-bust через `?v=` или версионирование cache name

Network-first

Сначала пытаемся в сеть. Если не получилось — отдаём из кеша.

• Когда: HTML страниц, API с актуальными данными (баланс счёта, статус заказа)
• Плюс: всегда свежие данные, когда есть сеть
• Минус: на медленной сети ждём таймаут перед фолбеком
• Решение: ставить timeout 3-5 секунд через Promise.race

Stale-while-revalidate

Отдаём из кеша сразу, а в фоне обновляем кеш с сети.

• Когда: списки, фиды, дашборды, аватарки — где можно показать вчерашние данные пока грузится свежие
• Плюс: моментальный UI + актуальные данные при следующем заходе
• Минус: пользователь видит старую версию до перезагрузки
• Решение: уведомить UI, что пришло обновление, через postMessage из SW

Network-only

Никакого кеша. Всегда сеть.

• Когда: оплаты, авторизация, OAuth-callback'и, аналитика
• Плюс: безопасно, актуально
• Минус: оффлайн не работает

Cache-only

Только кеш. Чисто оффлайн-режим.

• Когда: precached статика, которая обязательно должна быть после установки
• В precache список кладём при `install` event

На практике

В одном PWA обычно используется 3-4 стратегии параллельно — для разных URL-паттернов. Workbox от Google делает это декларативно. Но и руками на 100 строк JS написать нетрудно.