Как закешировать файл через Service Worker?

Файл кешируют через Service Worker с помощью Cache API: в событии `install` открывают кеш и добавляют файлы, а в `fetch` отдают их из кеша.

Кеширование при установке

В событии install открывают кеш и добавляют нужные файлы:

// sw.js
const CACHE = 'v1';
const FILES = ['/', '/index.html', '/styles.css', '/app.js'];

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

cache.addAll(FILES) загружает и сохраняет файлы в кеш.

Отдача из кеша при запросе

В событии fetch перехватывают запросы и отдают из кеша:

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => cached || fetch(event.request)),
  );
});

Это стратегия cache-first: сначала кеш, при отсутствии — сеть.

Стратегии кеширования

• Cache-first — сначала кеш (статика: CSS, JS, шрифты).
• Network-first — сначала сеть, кеш как fallback (динамика).
• Stale-while-revalidate — отдать из кеша, параллельно обновить.

Динамическое кеширование

Кешировать ответы по ходу:

caches.open(CACHE).then((cache) => cache.put(request, response.clone()));

Очистка старого кеша

В activate удаляют устаревшие версии кеша.

Требования

• HTTPS (кроме localhost).
• Регистрация SW: navigator.serviceWorker.register('/sw.js').

Коротко для собеседования

Файл кешируют через Service Worker + Cache API: в install — caches.open() + cache.addAll(files); в fetch — caches.match(request) отдаёт из кеша (cache-first) или идёт в сеть. Стратегии: cache-first (статика), network-first (динамика), stale-while-revalidate. Требует HTTPS. Старый кеш чистят в activate.