Workbox и Cache Storage API

Workbox — это библиотека JavaScript, предназначенная для упрощения работы с сервис-воркерами и кэшированием ресурсов веб-приложений. Она обеспечивает мощный и гибкий инструмент для реализации стратегии кэширования, автоматизации управления ресурсами и повышения производительности веб-приложений через оффлайн-доступ.

Подключение Workbox

Для использования Workbox существует два основных способа: через CDN или npm. При подключении через CDN можно добавить в сервис-воркер следующий код:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.6.0/workbox-sw.js');

if (workbox) {
  console.log("Workbox успешно загружен");
}

При использовании npm:

npm install workbox-cli --save-dev

Затем можно импортировать модули Workbox в сервис-воркере:

import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

Precache и Runtime Cache

Precache позволяет заранее кэшировать необходимые ресурсы во время установки сервис-воркера. Это особенно важно для статических файлов приложения, таких как HTML, CSS, JS и изображения. Пример использования:

precacheAndRoute([
  { url: '/index.html', revision: '12345' },
  { url: '/styles/main.css', revision: '67890' },
  { url: '/scripts/app.js', revision: 'abcdef' },
]);

Runtime Cache применяется для динамических ресурсов, загружаемых во время работы приложения. Для этого используется registerRoute с определённой стратегией:

registerRoute(
  ({ request }) => request.destination === 'image',
  new StaleWhileRevalidate({
    cacheName: 'images-cache',
    plugins: [
      {
        cacheWillUpdate: async ({ response }) => {
          if (response.status === 200) {
            return response;
          }
          return null;
        }
      }
    ]
  })
);

Стратегии кэширования

Workbox предоставляет несколько стандартных стратегий кэширования:

  1. Cache First — сначала проверяется кэш, если ресурс отсутствует — выполняется сетевой запрос. Подходит для редко изменяющихся ресурсов.
  2. Network First — сначала выполняется сетевой запрос, если сеть недоступна — используется кэш. Оптимально для динамического контента.
  3. Stale While Revalidate — сразу возвращается кэшированный ресурс, а параллельно обновляется кэш с помощью сетевого запроса.
  4. Network Only и Cache Only — ограниченные стратегии для специфических случаев.

Работа с Cache Storage API

Cache Storage API является нативным механизмом браузера для хранения ресурсов. Workbox использует этот API под капотом, позволяя управлять кэшами через удобные абстракции. Основные методы:

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

Пример прямой работы с Cache Storage без Workbox:

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

Продвинутое использование Workbox Plugins

Workbox поддерживает плагины для расширенной настройки кэширования:

  • ExpirationPlugin — ограничивает количество записей или время жизни ресурсов в кэше:
import { ExpirationPlugin } from 'workbox-expiration';

registerRoute(
  ({ request }) => request.destination === 'image',
  new StaleWhileRevalidate({
    cacheName: 'images-cache',
    plugins: [new ExpirationPlugin({ maxEntries: 50, maxAgeSeconds: 7 * 24 * 60 * 60 })]
  })
);
  • CacheableResponsePlugin — позволяет кэшировать только успешные ответы (например, с HTTP 200):
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

new StaleWhileRevalidate({
  cacheName: 'api-cache',
  plugins: [new CacheableResponsePlugin({ statuses: [0, 200] })]
});
  • Background Sync Plugin — обеспечивает повторную отправку запросов при восстановлении сетевого соединения.

Интеграция с маршрутизацией

Workbox позволяет легко настраивать маршрутизацию запросов с помощью registerRoute. Фильтры могут использоваться по типу запроса, URL-паттерну или функции-колбэку:

registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst({
    cacheName: 'api-cache'
  })
);

Автоматическое обновление сервис-воркера

Workbox поддерживает контроль версий и автоматическое обновление сервис-воркера. Для этого используются опции skipWaiting() и clientsClaim():

self.addEventListener('install', event => self.skipWaiting());
self.addEventListener('activate', event => self.clients.claim());

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

Сборка и интеграция

Для крупных проектов часто используется Workbox CLI или Webpack-плагины (workbox-webpack-plugin) для автоматического создания сервис-воркеров и pre-cache списков. Пример конфигурации Webpack:

const { InjectManifest } = require('workbox-webpack-plugin');

module.exports = {
  plugins: [
    new InjectManifest({
      swSrc: './src/service-worker.js',
      swDest: 'service-worker.js',
    })
  ]
};

Этот подход обеспечивает более точный контроль над логикой сервис-воркера и интеграцией с билд-процессом.

Workbox сочетает возможности Cache Storage API с удобными абстракциями и стратегиями, что делает его мощным инструментом для построения современных прогрессивных веб-приложений с высокой производительностью и оффлайн-доступом.

Оглавление