advanced
Service Workers
Перехватывайте сетевые запросы, реализуйте offline-поведение, кэшируйте assets, управляйте lifecycle и избегайте ловушек устаревших обновлений.
Service worker — отдельный script, перехватывающий fetch, кэширующий ответы, поддерживающий offline и часть фоновых событий. Lifecycle install, activate и update намеренно консервативен. В продакшене — версионирование кэша, устаревший контент, scope, HTTPS и явный fallback.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((cached) => cached ?? fetch(event.request))
);
});
skipWaiting и clients.claim меняют скорость принятия обновлений — применяйте осознанно. Не кэшируйте персональные ответы без Vary и плана инвалидации.
На интервью: lifecycle и разница между кэшем для устойчивости и маскировкой сломанных выкладок.
Типовые ошибки: плохой SW отдаёт устаревший код; кэш auth-ответов без заботы — утечка между сессиями.
Компромисс: удобство против контроля — выбирайте механизм под вашу связность и бюджет производительности.
Чеклист:
- Именованные версии кэша; удаление старых на activate.
- Offline fallback-маршруты.
- Scope и HTTPS.
- Тестируйте обновления через перезагрузки.