Стратегии офлайн-кэширования: CacheFirst и NetworkFirst
Реализуйте стратегию Cache-First для статических ресурсов и Network-First для ответов API с помощью Cache API и библиотеки Workbox
«Стратегии офлайн-кэширования: CacheFirst и NetworkFirst» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Почему важны стратегии кэширования
Сервис-воркеры могут перехватывать каждый запрос fetch, но Вам нужна стратегия. Для разного содержимого нужны разные правила: логотип следует кэшировать навсегда, ответ API должен всегда быть свежим, а для новостных статей подходит стратегия «сначала устаревшие данные, затем обновление».
API кэша
Сервис-воркеры используют API кэша: хранилище пар «ключ — значение» из пар Request → Response, отдельное для каждого источника. Данные сохраняются между сеансами.
// open a cache:
const cache = await caches.open('v1');
// add resources:
await cache.add('/styles.css');
await cache.addAll(['/', '/app.js', '/styles.css']);
// look up:
const response = await cache.match('/styles.css');
// delete:
await cache.delete('/styles.css');Сначала кэш
Сначала проверьте кэш. Если запись найдена, верните её. Если нет, обратитесь к сети и сохраните ответ в кэше. Лучше всего подходит для: статических ресурсов, шрифтов, логотипов и оболочки приложения.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
if (cached) return cached;
return fetch(event.request).then(res => {
const clone = res.clone();
caches.open('v1').then(c => c.put(event.request, clone));
return res;
});
})
);
});Сначала сеть
Сначала обратитесь к сети. Если запрос не выполнен (например, устройство не подключено к сети), используйте кэш. Лучше всего подходит для: запросов к API и динамического содержимого, для которого свежесть важнее скорости.
self.addEventListener('fetch', (event) => {
event.respondWith(
fetch(event.request).then(res => {
const clone = res.clone();
caches.open('api-v1').then(c => c.put(event.request, clone));
return res;
}).catch(() => caches.match(event.request))
);
});Сначала устаревшие данные, затем обновление
Сразу верните данные из кэша (это быстро), затем загрузите свежие данные в фоновом режиме и обновите кэш для следующего раза. Лучше всего подходит для: аватаров, новостных статей и данных, которые могут быть слегка устаревшими.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
const network = fetch(event.request).then(res => {
caches.open('v1').then(c => c.put(event.request, res.clone()));
return res;
});
return cached || network;
})
);
});Только сеть
Полностью обходите кэш — всегда обращайтесь к сети. Используйте этот вариант для запросов, которые нельзя кэшировать (конечные точки аутентификации, аналитика и операции изменения данных).
self.addEventListener('fetch', (event) => {
if (event.request.url.includes('/api/auth')) {
event.respondWith(fetch(event.request));
return;
}
// ... other strategies
});Только кэш
Никогда не обращайтесь к сети — возвращайте данные из кэша или завершайте операцию с ошибкой. Это полезно для файлов, предварительно сохранённых в кэше и которые не нужно обновлять в течение сеанса.
Стратегии Workbox
Workbox объединяет все стратегии в виде именованных классов. Шаблонного кода становится меньше.
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
registerRoute(({ request }) => request.destination === 'image',
new CacheFirst({ cacheName: 'images' })
);
registerRoute(({ url }) => url.pathname.startsWith('/api/'),
new NetworkFirst({ cacheName: 'api', networkTimeoutSeconds: 3 })
);
registerRoute(({ request }) => request.destination === 'document',
new StaleWhileRevalidate({ cacheName: 'pages' })
);Срок хранения кэша
Кэши будут расти бесконечно, если не установить ограничения. Workbox предоставляет ExpirationPlugin.
import { ExpirationPlugin } from 'workbox-expiration';
new CacheFirst({
cacheName: 'images',
plugins: [new ExpirationPlugin({
maxEntries: 50,
maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
})]
});Кэшируемый ответ
По умолчанию браузеры кэшируют только ответы 200. Не сохраняйте ответы 4xx, 5xx и непрозрачные ответы (междоменные ответы без CORS), чтобы не заполнять кэш ошибками.
Резервная страница без подключения к сети
Показывайте понятную страницу без подключения к сети, если навигация не удалась, — это удобнее, чем стандартная страница ошибки браузера.
self.addEventListener('install', (e) => {
e.waitUntil(caches.open('offline').then(c => c.add('/offline.html')));
});
self.addEventListener('fetch', (e) => {
if (e.request.mode === 'navigate') {
e.respondWith(
fetch(e.request).catch(() => caches.match('/offline.html'))
);
}
});Выбор подходящей стратегии
Статические ресурсы (логотип, шрифт, CSS): сначала кэш. Данные API (профиль пользователя, лента): сначала сеть. Содержимое, которое иногда обновляется (аватары, новости): сначала устаревшие данные, затем обновление. Аутентификация: только сеть. Предварительно установленные статические файлы: только кэш.
Быстрая проверка
Какая стратегия кэширования лучше всего подходит для файла CSS, который редко изменяется, но должен загружаться быстро?
Повторение: стратегии кэширования
Сначала кэш: статические ресурсы (быстрее всего, но данные могут быть устаревшими). Сначала сеть: данные API (самые свежие, но загрузка медленнее). Сначала устаревшие данные, затем обновление: выдача данных из кэша и загрузка в фоновом режиме. Только сеть: аутентификация и операции изменения данных. Только кэш: предварительно установленная оболочка. Используйте Workbox, чтобы сократить объём шаблонного кода. Устанавливайте ограничения срока хранения. Добавляйте резервную страницу без подключения к сети. Выбирайте стратегию для каждого типа ресурса.
Часто задаваемые вопросы
Урок «Стратегии офлайн-кэширования: CacheFirst и NetworkFirst» бесплатный?
Да — полный текст урока «Стратегии офлайн-кэширования: CacheFirst и NetworkFirst» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Стратегии офлайн-кэширования: CacheFirst и NetworkFirst»?
Реализуйте стратегию Cache-First для статических ресурсов и Network-First для ответов API с помощью Cache API и библиотеки Workbox Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Стратегии офлайн-кэширования: CacheFirst и NetworkFirst»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Манифест веб-приложения
- Регистрация и жизненный цикл сервис-воркера
- Стратегии офлайн-кэширования: CacheFirst и NetworkFirst
- Push-уведомления