0Pricing
Vue Academy · Урок

Стратегии Service Worker

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

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

Обзор стратегий кэширования

Service worker перехватывает сетевые запросы и решает, отдавать ли данные из кэша, из сети или из обоих источников. Workbox называет четыре основные стратегии, каждая из которых подходит для своего типа ресурса.

CacheFirst

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

// serve cached, fall back to network on miss

NetworkFirst

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

// try network, fall back to cache when offline

StaleWhileRevalidate

StaleWhileRevalidate сразу возвращает кэшированную копию для скорости, одновременно загружая свежую копию в фоновом режиме для обновления кэша. Стратегия отлично подходит для пакетов JS и CSS.

// return cache now, update cache in background

NetworkOnly и CacheOnly

Две крайности: NetworkOnly всегда выполняет загрузку из сети, не используя кэш, а CacheOnly отдаёт только предварительно кэшированное содержимое. Используйте их для некэшируемых запросов POST или ресурсов, которые должны быть полностью предварительно кэшированы.

Массив runtimeCaching

В конфигурации Workbox runtimeCaching — это массив правил. Каждое правило сопоставляет URL запросов со стратегией и именем кэша.

VitePWA({
  workbox: {
    runtimeCaching: [ /* rules */ ]
  }
});

Правило urlPattern

У каждого правила есть urlPattern (регулярное выражение или функция), handler (имя стратегии) и options, например имя кэша.

{
  urlPattern: /\/api\//,
  handler: "NetworkFirst",
  options: { cacheName: "api-cache" }
}

Кэширование статических ресурсов с помощью CacheFirst

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

{
  urlPattern: /\.(?:png|jpg|svg|woff2)$/,
  handler: "CacheFirst",
  options: { cacheName: "static-assets" }
}

Кэширование пакетов JS с помощью StaleWhileRevalidate

Мгновенно отдавайте пакеты скриптов и стилей из кэша, одновременно обновляя их в фоновом режиме.

{
  urlPattern: /\.(?:js|css)$/,
  handler: "StaleWhileRevalidate",
  options: { cacheName: "assets" }
}

Плагин ограничения срока хранения

Без ограничений кэши растут бесконечно. Параметр expiration ограничивает число записей и срок их хранения, сначала удаляя самые старые.

options: {
  cacheName: "api-cache",
  expiration: {
    maxEntries: 50,
    maxAgeSeconds: 60 * 60 * 24
  }
}

Кэширование непрозрачных ответов

Для ответов программного интерфейса из другого источника часто добавляют cacheableResponse с разрешёнными статусами, чтобы сохранять только успешные ответы.

options: {
  cacheableResponse: { statuses: [0, 200] }
}

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

Какая стратегия лучше всего подходит для ответов программного интерфейса, которые должны быть свежими, но доступными офлайн?

Итоги

Стратегии Workbox соответствуют типам ресурсов: CacheFirst — статическим ресурсам, NetworkFirst — ответам программного интерфейса, а StaleWhileRevalidate — пакетам JS/CSS. Определяйте их в массиве runtimeCaching с помощью urlPattern, handler и options, например с плагином expiration для ограничения размера кэша.

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

Урок «Стратегии Service Worker» бесплатный?

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

Чему я научусь в уроке «Стратегии Service Worker»?

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

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

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

Сколько времени занимает урок «Стратегии Service Worker»?

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

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

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

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

  1. Настройка vite-plugin-pwa
  2. Стратегии Service Worker
  3. Офлайн-поддержка и фоновая синхронизация
  4. Push-уведомления в Vue PWA
← Назад к Vue Academy