Service Workers для кэширования

Service Worker — это скрипт, работающий в фоновом режиме браузера, независимо от веб-страницы, который позволяет реализовать возможности оффлайн-доступа, push-уведомлений и продвинутого кэширования ресурсов. В контексте Vue.js Service Workers особенно полезны для Progressive Web App (PWA), обеспечивая быстрый отклик приложения и снижение нагрузки на сеть.

Регистрация Service Worker в Vue.js

Для интеграции Service Worker в проект на Vue необходимо зарегистрировать его в точке входа приложения, обычно это main.js:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service Worker зарегистрирован с областью:', registration.scope);
      })
      .catch(error => {
        console.error('Регистрация Service Worker не удалась:', error);
      });
  });
}

Ключевые моменты регистрации:

  • Проверка поддержки браузера через 'serviceWorker' in navigator.
  • Регистрация выполняется после события load, чтобы не блокировать загрузку страницы.
  • Файл Service Worker должен находиться в корне проекта для корректного управления всеми ресурсами.

Структура Service Worker

Файл service-worker.js включает три основных события:

  1. install — установка Service Worker и кэширование статических ресурсов.
  2. activate — активация Service Worker и управление устаревшими кэшами.
  3. fetch — перехват сетевых запросов и их обработка через кэш.

Пример базового Service Worker для кэширования ресурсов:

const CACHE_NAME = 'vue-app-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/css/app.css',
  '/js/app.js',
  '/favicon.ico'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
      .then(() => self.skipWaiting())
  );
});

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cache => {
          if (cache !== CACHE_NAME) {
            return caches.delete(cache);
          }
        })
      );
    })
  );
  self.clients.claim();
});

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

Особенности работы событий:

  • install позволяет предварительно кэшировать ключевые ресурсы приложения.
  • activate отвечает за очистку устаревших кэшей и гарантирует, что новый Service Worker вступает в силу сразу.
  • fetch дает возможность отдавать ресурсы из кэша, минимизируя обращения к серверу.

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

Выбор стратегии кэширования зависит от типа ресурсов:

  1. Cache First — приоритет отдаётся кэшу, сеть используется при отсутствии ресурса в кэше. Подходит для статических файлов.
event.respondWith(
  caches.match(event.request)
    .then(response => response || fetch(event.request))
);
  1. Network First — сначала сеть, кэш используется как резерв. Полезно для динамических данных.
event.respondWith(
  fetch(event.request)
    .then(response => {
      caches.open(CACHE_NAME).then(cache => cache.put(event.request, response.clone()));
      return response;
    })
    .catch(() => caches.match(event.request))
);
  1. Stale-While-Revalidate — отдаёт кэш сразу, но параллельно обновляет его из сети.
event.respondWith(
  caches.match(event.request).then(cachedResponse => {
    const networkFetch = fetch(event.request).then(response => {
      caches.open(CACHE_NAME).then(cache => cache.put(event.request, response.clone()));
      return response;
    });
    return cachedResponse || networkFetch;
  })
);

Интеграция с Vue CLI и PWA плагином

Vue CLI предоставляет официальный плагин @vue/cli-plugin-pwa, который упрощает создание PWA с Service Worker. Основные шаги:

  • Установка плагина:
vue add @vue/pwa
  • Настройка vue.config.js для управления кэшированием:
module.exports = {
  pwa: {
    name: 'VueApp',
    themeColor: '#4DBA87',
    workboxOptions: {
      skipWaiting: true,
      clientsClaim: true,
    }
  }
};
  • Плагин автоматически генерирует service-worker.js и управляет стратегиями кэширования.

Управление версиями кэша

Обновление Service Worker требует контроля версий кэша, чтобы старые данные не мешали работе нового приложения:

const CACHE_NAME = 'vue-app-cache-v2';

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames =>
      Promise.all(
        cacheNames.map(cache => {
          if (cache !== CACHE_NAME) return caches.delete(cache);
        })
      )
    )
  );
});

Отладка и мониторинг

Для проверки работы Service Worker в браузере используются:

  • DevTools → Application → Service Workers.
  • Возможность принудительного обновления и удаления кэша.
  • Мониторинг запросов в Network с фильтром “Offline” для имитации отсутствия сети.

Эффективное использование Service Worker в Vue.js позволяет создавать приложения, которые работают быстрее, загружаются оффлайн и оптимально используют сетевые ресурсы.

Оглавление