Сталкивался ли с Cache API?

Что такое Cache API?

Cache API — это встроенный в браузер интерфейс, который позволяет хранить HTTP-запросы и соответствующие им ответы. В отличие от HTTP-кэша, который управляется браузером автоматически, Cache API даёт разработчику полный контроль над тем, что и когда кэшируется. Он особенно полезен в сочетании с Service Workers для создания прогрессивных веб-приложений (PWA), работающих в офлайн-режиме.

Основные методы

• caches.open(name) — открывает (или создаёт) кэш с указанным именем.
• cache.put(request, response) — добавляет пару запрос-ответ в кэш.
• cache.match(request) — ищет ответ по запросу.
• cache.delete(request) — удаляет запись из кэша.

Пример использования в Service Worker

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cachedResponse => {
      // Возвращаем из кэша, если есть
      if (cachedResponse) return cachedResponse;
      // Иначе делаем запрос к сети
      return fetch(event.request).then(response => {
        // Кэшируем ответ для будущих запросов
        const clone = response.clone();
        caches.open('v1').then(cache => cache.put(event.request, clone));
        return response;
      });
    })
  );
});

В этом примере Service Worker перехватывает все запросы. Если запрос уже есть в кэше, он возвращается мгновенно. Если нет — выполняется сетевой запрос, а его ответ сохраняется в кэш для последующего использования.

Где применяется

Cache API используется в PWA для обеспечения офлайн-доступа, ускорения загрузки повторных страниц и снижения нагрузки на сервер. Он также полезен для кэширования статических ресурсов (CSS, JS, изображения) и API-ответов.

Вывод: Cache API — это мощный инструмент для управления кэшированием на клиенте, который стоит применять в проектах, где важна производительность и работа без интернета, особенно в связке с Service Workers.