Всем привет!
Меня зовут Прокошкин Леонид, я Frontend-разработчик в компании DDPlanet.
Хочу рассказать о том, как мы решали проблему с высокой нагрузкой на сервер и большими расходами трафика при использовании тяжелых Lottie-анимаций.
В проекте было около 30 Lottie-анимаций, некоторые весили ~100 KB, и нам нужно было оптимизировать их загрузку.
Как снизить трафик и нагрузку? Правильно - кеширование. Мы выбрали кеширование на стороне Service Worker.
Сравнение скорости загрузки
Чтобы наглядно показать разницу в скорости загрузки, сравним время получения одной из анимации из сети и из кеша:
Загрузка из сети (~1300 ms):
Загрузка из кеша (~1.5 ms):
Думаю, разница очевидна. Итак, перейдем к реализации.
Почему именно Service Worker?
Service Worker - это фоновый скрипт, который работает отдельно от основного потока браузера. Его ключевые возможности:
Перехват сетевых запросов: можно решать, отдавать ли ответ из сети, из кеша или возвращать кастомный ответ.
Гибкое кеширование: сохранять файлы в Cache Storage, управлять временем жизни и условиями обновления.
Работа в оффлайне: даже если интернет недоступен, можно возвращать данные из кеша.
Фоновая обработка: например, проверка обновлений, синхронизация или очистка устаревших данных.
Теперь разберемся, почему не подходят другие популярные варианты:
Почему не localStorage
API синхронный - любое чтение/запись блокирует основной поток JS. Для JSON-анимаций по 100 KB это вызывает лаги.
Очень маленький лимит хранилища (обычно 5–10 MB).
Нет встроенного механизма версионирования - ключи и очистку придется писать вручную.
Почему не IndexedDB
API асинхронный и довольно сложный: транзакции, версии схем, обработка ошибок.
Отлично подходит для структурированных данных, но не ведет себя как HTTP-кеш для файлов.
Чтобы связать IndexedDB с fetch, нужны обертки и собственные механизмы TTL и версионирования.
Почему именно Service Worker + Cache Storage
Запрос остается обычным fetch, а SW решает - вернуть ответ из кеша или сети. (не нужно переписывать готовые запросы, чтобы внедрить SW).
Хранение оптимизировано браузером под бинарные файлы и JSON.
Time To Live и версионирование удобно реализовать через query-параметры (?ts=...).
Не блокирует основной поток: все выполняется в фоне.
Реализация
1) Service Worker
Создадим файл service-worker.js.
// service-worker.js const CACHE_NAME = 'stickers-lottie-cache'; // Маршрут для загрузки одного стикера по guid const STICKER_FILE_REGEX = /\/file\/download\/api\/Sticker\/Get\/[0-9a-fA-F-]+$/; // Маршрут для пакета (такой же, как и на клиенте) const STICKER_PACK_ROUTE = '/api/StickerPack/GetWelcomeStickerPack'; // Переменные для "ленивой" очистки let lastCleanup = 0; let ttlMs = 15 * 60 * 1000; // базовый TimeToLive (15 мин, пишем подходящий вам)
Теперь нам необходимо обработать события SW
install: установка воркера
Событие install запускается, когда браузер скачал новую версию SW и пытается ее установить.
self.skipWaiting() пропускает стадию waiting - новая версия сразу перейдет к событию activate.
event.waitUntil(caches.open(CACHE_NAME)) мы говорим что событие install будет ждать открытия кеша и перейдет к activate после успешного открытия, нам это необходимо для того, чтобы к моменту активации мы точно знали, что кеш есть, а так же быстро активируем обновления SW, если они есть.
Важно учитывать!
skipWaiting() опасен при несовместимости активов: новая логика может обслуживать старые вкладки.
Предкеш критичных файлов лучше тоже делать внутри waitUntil.
self.addEventListener('install', (event) => { self.skipWaiting() event.waitUntil(caches.open(CACHE_NAME)) })
activate: захват клиентов
Событие activate приходит сразу после успешного события install.
clients.claim() - новый SW берет контроль над всеми открытыми вкладками (без их перезагрузки).
«Миграция» кешей: удаляем все кеши, имена которых не равны CACHE_NAME.
(это актуально, если мы используем версионность кешей, в данном примере у нас этого нет)Настраиваем ttlMs (Time to Live ms) через Storage API: чем больше квота, тем дольше храним.
Важно учитывать!
clients.claim() + skipWaiting() = быстрые апдейты, но думайте о совместимости со старой страницей.
navigator.storage.estimate() может вернуть undefined - нужно писать дефолтный estimate, но в рамках разумного.
self.addEventListener('activate', (event) => { event.waitUntil( (async () => { await self.clients.claim() //На всякий случай удаляем старые версии кеша (если у нас была бы версионность, в данном примере ее нет) const keys = await caches.keys() await Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k))) // Адаптивный TTL в зависимости от доступной квоты try { const estimate = await navigator.storage?.estimate?.() const quota = estimate?.quota || 0 ttlMs = quota > 2 * 1024 ** 3 ? 60 * 60 * 1000 // >2 GiB → 60 мин : quota > 1 * 1024 ** 3 ? 30 * 60 * 1000 // >1 GiB → 30 мин : 15 * 60 * 1000 // иначе → 15 мин } catch { // оставляем ttlMs по умолчанию } })() ) })
cleanupCacheIfNeeded: «ленивая» (пороговая) очистка по ttlMs
Проверяем, прошло ли ttlMs с момента последней чистки (lastCleanup). Если нет - выходим быстро.
Если пора чистить: обходим все ключи кеша и удаляем записи, у которых метка ts старше ttlMs.
Почему ?ts= в ключе:
Ключ кэша - это URL. Добавляя ?ts=..., фиксируем момент записи.
При чтении используем ignoreSearch: true, но для очистки извлекаем ts из ключа.
const cleanupCacheIfNeeded = async () => { const now = Date.now() if (now - lastCleanup < ttlMs) return lastCleanup = now const cache = await caches.open(CACHE_NAME) const requests = await cache.keys() await Promise.all( requests.map((req) => { const url = new URL(req.url) const ts = Number(url.searchParams.get('ts')) if (ts && now - ts > ttlMs) { return cache.delete(req) } return Promise.resolve() }) ) }
fetch: перехват запросов
Обрабатываем только GET-запросы к файлам стикеров и пакету.
Cache First: сначала ищем в кеше (ignoreSearch: true, чтобы игнорировать наши query параметры ?ts..), если нет - идем в сеть, сохраняем копию с ?ts.
При оффлайне возвращаем кеш (если есть), иначе - минимальный ответ 504.
Важно учитывать!
ignoreSearch: true важно, потому что ключи содержат ?ts=
Для UX вместо 504 можно, например, вернуть базовую анимацию или обработать по Вашему усмотрению
self.addEventListener('fetch', (event) => { const { request } = event if (request.method !== 'GET') return const url = new URL(request.url) const isStickerFile = STICKER_FILE_REGEX.test(url.pathname) const isStickerPack = url.pathname.includes(STICKER_PACK_ROUTE) if (!isStickerFile && !isStickerPack) return event.respondWith( (async () => { await cleanupCacheIfNeeded() // Ищем в кеше без учета query (?ts=...) const cache = await caches.open(CACHE_NAME) const cached = await cache.match(request, { ignoreSearch: true }) if (cached) return cached try { const networkResponse = await fetch(request) const clone = networkResponse.clone() const tsKey = `${request.url}${request.url.includes('?') ? '&' : '?'}ts=${Date.now()}` cache.put(tsKey, clone).catch(() => {}) return networkResponse } catch { if (cached) return cached return new Response('Offline and not cached', { status: 504, statusText: 'Gateway Timeout', }) } })() ) })
2) Хук для использования Service Worker
Сам по себе Service Worker живет отдельно и ничего не знает о бизнес логике приложения. Чтобы связать его с клиентской частью, нужно:
Зарегистрировать воркер через navigator.serviceWorker.register.
Дождаться готовности (navigator.serviceWorker.ready).
Организовать удобный слой взаимодействия, я сделал это через хук
Перейдем к реализации
Константы окружения и маршруты
const CACHE_NAME = 'stickers-lottie-cache' //имя кеша (совпадает с именем в SW) const STICKER_PACK_ROUTE = '/api/StickerPack/GetWelcomeStickerPack' //API роут для пакета // SSR-защита const ORIGIN = typeof window !== 'undefined' ? window.location.origin : '' //SSR защита (вне браузера window нет), const GET_STICKER_ROUTE = `${ORIGIN}${STICKER_PACK_ROUTE}` //абсолютный URL ключа в кеше // Типы данных type StickerUrl = { dotLottieFormatUrl?: string } type Sticker = { id: string; urls: StickerUrl } type StickerPack = { id: string; updateDate: string; stickers: Sticker[] } // API-заглушки declare function getWelcomeStickerPackAPI(): Promise<{ result: StickerPack }> declare function getStickerPackUpdatesAPI(args: { stickerPackId: string; lastUpdateDate: string; }): Promise<Partial<StickerPack> declare function downloadFileAPI(url: string): Promise<void>
Регистрация SW и базовая подготовка кеша
Регистрируем SW, ждем, когда сработает событие ready и открываем кеш.
export const registerServiceWorker = async () => { await navigator.serviceWorker.register('/service-worker.js') await navigator.serviceWorker.ready const cache = await caches.open(CACHE_NAME) // ... }
Чтение пакета из кеша
Пытаемся найти пакет по ключу GET_STICKER_ROUTE (ignoreSearch: true, не забываем). Если нашли - парсим JSON. Поврежденные записи безопасно игнорируем.
let cachedPack: StickerPack | null = null const cache = await caches.open(CACHE_NAME) const cachedResp = await cache.match(GET_STICKER_ROUTE, { ignoreSearch: true }) if (cachedResp) { try { cachedPack = await cachedResp.json() } catch { cachedPack = null } }
Первый запуск: загрузка пакета
Если пакета нет в кеше - тянем из сети (SW положит ответ в кеш), затем заранее скачиваем файлы .lottie и сохраняем сам пакет с ?ts= для участия в TTL очистке.
if (!cachedPack) { const pack = await getWelcomeStickerPackAPI() cachedPack = pack.result await Promise.all( cachedPack.stickers.map(({ urls }) => urls.dotLottieFormatUrl ? downloadFileAPI(urls.dotLottieFormatUrl) : Promise.resolve() ) ) await cache.delete(GET_STICKER_ROUTE, { ignoreSearch: true }).catch(() => {}) await cache.put( `${GET_STICKER_ROUTE}?ts=${Date.now()}`, new Response(JSON.stringify(cachedPack), { headers: { 'Content-Type': 'application/json' } }) ) }
Проверка и применение обновлений
Тут мы обращаемся к нашему API, если есть обновленные стикеры, то удаляем старые версии из кеша и записываем новые, делаем это точечно и сохраняем только обновленный стикер
const updates = await getStickerPackUpdatesAPI({ stickerPackId: cachedPack.id, lastUpdateDate: cachedPack.updateDate, }) if (!!updates?.stickers?.length) { for (const updatedSticker of updates.stickers) { const prev = cachedPack.stickers.find((s) => s.id === updatedSticker.id) const oldUrl = prev?.urls.dotLottieFormatUrl if (oldUrl) { await cache.delete(oldUrl, { ignoreSearch: true }).catch(() => {}) } if (updatedSticker.urls.dotLottieFormatUrl) { await downloadFileAPI(`${updatedSticker.urls.dotLottieFormatUrl}?force=true`) } } const nextStickersMap = new Map() for (const s of cachedPack.stickers) nextStickersMap.set(s.id, s) for (const us of updates.stickers) nextStickersMap.set(us.id, { ...nextStickersMap.get(us.id), ...us }) const nextPack: StickerPack = { ...cachedPack, ...updates, stикkers: Array.from(nextStickersMap.values()), updateDate: updates.updateDate ?? new Date().toISOString(), } await cache.delete(GET_STICKER_ROUTE, { ignoreSearch: true }).catch(() => {}) await cache.put( `${GET_STICKER_ROUTE}?ts=${Date.now()}`, new Response(JSON.stringify(nextPack), { headers: { 'Content-Type': 'application/json' } }) ) }
В итоге мы свели загрузку Lottie-анимаций к одному обращению в сеть и дальнейшей выдаче из Cache Storage. Это ощутимо ускорило повторную загрузку стикеров, мы избавились от жесткого расхода трафика, убрали лишнюю нагрузку на сервер, стикеры теперь крутятся даже оффлайн, пользователи рады.
