JavaScript Academy · Урок

API Cache

Сохраняйте ответы в кэше и отдавайте их из него.

«API Cache» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Что такое API кэширования

API кэширования хранит пары запросов и ответов в именованных кэшах. Сервисные воркеры используют его, чтобы отдавать ресурсы без обращения к сети, что служит основой поддержки работы без подключения к сети.

Объект caches

Глобальный объект caches (объект CacheStorage) управляет всеми именованными кэшами. Он доступен и на страницах, и в сервисных воркерах.

// Available globally:
// caches.open(name)
// caches.match(request)
// caches.delete(name)
// caches.keys()

Открытие кэша

caches.open(name) возвращает промис для кэша с указанным именем и создаёт его, если такого кэша ещё нет. Имена позволяют создавать версии кэшей.

caches.open('static-v1').then(cache => {
  console.log('cache ready');
});

Предварительное кэширование с помощью addAll

Во время install метод cache.addAll(urls) за один вызов загружает и сохраняет список ресурсов. Если не удаётся выполнить хотя бы один запрос, вся операция завершается отклонённым промисом.

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static-v1').then(cache =>
      cache.addAll(['/', '/styles.css', '/app.js'])
    )
  );
});

waitUntil

event.waitUntil(promise) сообщает браузеру, что воркер нужно поддерживать активным, пока промис не завершится. Оберните в него настройку кэша, чтобы установка не завершилась слишком рано.

self.addEventListener('install', (event) => {
  event.waitUntil(setupCache());
});

Добавление одной записи

cache.put(request, response) сохраняет один ответ, а cache.add(url) загружает и сохраняет один URL. Используйте put, если у Вас уже есть ответ, который нужно сохранить.

const cache = await caches.open('static-v1');
const response = await fetch('/logo.png');
await cache.put('/logo.png', response);

Поиск в кэше

cache.match(request) ищет сохранённый ответ. Метод возвращает промис, который разрешается найденным ответом или значением undefined, если совпадение не найдено.

const cache = await caches.open('static-v1');
const hit = await cache.match('/styles.css');
if (hit) console.log('served from cache');

Сокращённая запись caches.match

caches.match(request) одновременно ищет во всех кэшах. Это удобно в обработчике запросов, когда неважно, в каком кэше находится ресурс.

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

respondWith

Внутри события fetch метод event.respondWith(promise) задаёт ответ, который будет использовать браузер. Разрешите промис кэшированным или только что загруженным объектом Response.

self.addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request));
});

Клонирование ответов

Тело ответа можно прочитать только один раз. Чтобы одновременно вернуть ответ и сохранить его, сначала создайте его клон.

const response = await fetch(request);
cache.put(request, response.clone()); // store a copy
return response; // return the original

Удаление записей из кэша

cache.delete(request) удаляет одну запись, а caches.delete(name) удаляет весь именованный кэш. Используйте эти методы для удаления устаревших ресурсов.

await cache.delete('/old-asset.js');
await caches.delete('static-v0'); // remove old cache version

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете API кэширования.

Итоги

Вы изучили API кэширования:

caches.open(name) получает или создаёт именованный кэш.
addAll выполняет предварительное кэширование, а put/add сохраняют записи.
match извлекает данные, а caches.match ищет во всех кэшах.
respondWith задаёт ответ в обработчике запросов.
Создавайте клон ответа перед его кэшированием и возвратом.

Далее — стратегии кэширования.

Часто задаваемые вопросы

Урок «API Cache» бесплатный?

Да — полный текст урока «API Cache» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «API Cache»?

Сохраняйте ответы в кэше и отдавайте их из него. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «API Cache»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy