PWA гайд

Offline-кэширование ассетов и API

Что кэшировать, что нельзя, и как версионировать кэш, чтобы пользователи не залипали на старой оболочке приложения.

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

1. Что кэшировать

ТипКэшировать?Стратегия
App shell (HTML/CSS/JS)ДаPrecache + bump версии
Шрифты / иконкиДаCache First
КартинкиВыборочноCache First с лимитами
Публичные API-спискиИногдаNetwork First или SWR
Auth / оплата / private dataНетNetwork Only

2. Паттерн версий

const VERSION = 'v3';
const STATIC_CACHE = `static-${VERSION}`;
const DATA_CACHE = `data-${VERSION}`;

// На activate: удаляем кэши, которые не совпадают с VERSION
self.addEventListener('activate', (event) => {
  event.waitUntil((async () => {
    const keys = await caches.keys();
    await Promise.all(
      keys
        .filter((key) => !key.endsWith(VERSION))
        .map((key) => caches.delete(key))
    );
  })());
});

Каждый релиз, где меняется shell, должен повышать VERSION.

3. Offline fallback для навигации

async function handleNavigation(request) {
  try {
    return await fetch(request);
  } catch {
    return (await caches.match('/offline.html')) || Response.error();
  }
}

4. Как не залипнуть на старой версии

  • Не кладите hashed-ассеты в кэш с вечным именем.
  • skipWaiting() + clients.claim() используйте осознанно; иногда нужен refresh.
  • Для HTML лучше Network First, чтобы обновления были видны.
  • Clear-Site-Data - только аварийный выход.

5. Заметки про Safari

  • Квоты меньше - кэшируйте только нужное.
  • Не рассчитывайте на долгий offline у редко открываемых PWA.
  • Проверяйте airplane mode на реальном iPhone после установки на Home Screen.