Service Worker конфигурация

Quasar Framework предоставляет встроенную поддержку Progressive Web App (PWA), что включает работу с Service Worker для кеширования ресурсов, оффлайн-доступа и push-уведомлений. Конфигурация Service Worker в Quasar управляется через файл quasar.conf.js и директорию src-pwa, где находятся все необходимые шаблоны.

Включение PWA и Service Worker

Для использования Service Worker необходимо активировать режим PWA в Quasar CLI:

quasar mode add pwa

После этого в quasar.conf.js появится раздел pwa, который позволяет задавать основные параметры:

pwa: {
  workboxPluginMode: 'InjectManifest', // или 'GenerateSW'
  workboxOptions: {}, // параметры Workbox
  manifest: {
    name: 'My Quasar App',
    short_name: 'QuasarApp',
    description: 'Пример PWA на Quasar',
    display: 'standalone',
    background_color: '#ffffff',
    theme_color: '#027be3'
  }
}

  • workboxPluginMode определяет режим генерации Service Worker:

    • GenerateSW — автоматическая генерация файла Service Worker с помощью Workbox, удобна для стандартных PWA.
    • InjectManifest — позволяет использовать собственный service-worker.js с кастомной логикой.

  • workboxOptions используется для передачи настроек Workbox, таких как стратегии кеширования и маршрутизация запросов.

Структура Service Worker

При использовании InjectManifest кастомный файл service-worker.js помещается в src-pwa:

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

// Предварительное кеширование ресурсов
precacheAndRoute(self.__WB_MANIFEST);

// Кеширование API запросов
registerRoute(
  ({ url }) => url.origin === 'https://api.example.com',
  new StaleWhileRevalidate({
    cacheName: 'api-cache'
  })
);

// Кеширование изображений
registerRoute(
  ({ request }) => request.destination === 'image',
  new StaleWhileRevalidate({
    cacheName: 'image-cache'
  })
);
  • precacheAndRoute(self.__WB_MANIFEST) — автоматически добавляет все ресурсы сборки для оффлайн-доступа.
  • registerRoute позволяет создавать кастомные маршруты кеширования для разных типов ресурсов.
  • Стратегия StaleWhileRevalidate используется для обновления кеша в фоне при отдаче старой версии пользователю.

Кастомизация жизненного цикла Service Worker

Quasar и Workbox поддерживают ключевые события Service Worker:

self.addEventListener('install', event => {
  console.log('Service Worker устанавливается');
  self.skipWaiting();
});

self.addEventListener('activate', event => {
  console.log('Service Worker активирован');
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cache => {
          if (cache !== 'precache-v1') return caches.delete(cache);
        })
      );
    })
  );
});

self.addEventListener('fetch', event => {
  console.log('Перехват запроса:', event.request.url);
});
  • install — установка Service Worker и начальное кеширование.
  • activate — активация нового Service Worker и удаление устаревших кешей.
  • fetch — перехват сетевых запросов, позволяет реализовать оффлайн-режим или стратегии кеширования.

Push-уведомления и Background Sync

Quasar PWA поддерживает push-уведомления через стандартные события Service Worker:

self.addEventListener('push', event => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: '/icons/icon-128x128.png'
    })
  );
});

self.addEventListener('notificationclick', event => {
  event.notification.close();
  event.waitUntil(clients.openWindow('/'));
});
  • push — обработка входящих уведомлений.
  • notificationclick — реакция на клик по уведомлению.
  • Можно сочетать с Background Sync для отложенной отправки запросов при восстановлении сети.

Настройка кеширования через Workbox

Workbox предоставляет гибкие стратегии кеширования:

  1. CacheFirst — отдаёт кешированную версию, если есть, иначе делает запрос.
  2. NetworkFirst — сначала пытается получить данные с сети, при ошибке отдаёт кеш.
  3. StaleWhileRevalidate — отдаёт старый кеш и обновляет в фоне.
  4. NetworkOnly / CacheOnly — строгие режимы для определённых ресурсов.

Пример комбинированной стратегии:

registerRoute(
  ({ url }) => url.pathname.startsWith('/static/'),
  new CacheFirst({
    cacheName: 'static-assets',
    plugins: [
      {
        maxEntries: 50,
        maxAgeSeconds: 7 * 24 * 60 * 60 // 7 дней
      }
    ]
  })
);

Отладка и обновление Service Worker

  • Проверка статуса Service Worker в браузере через DevTools → Application → Service Workers.
  • Для обновления Service Worker используется метод self.skipWaiting() в install и clients.claim() в activate.
  • Для тестирования оффлайн-доступа включается режим Offline в DevTools.

Особенности Quasar

  • Quasar автоматически интегрирует Workbox при сборке PWA.
  • Директория src-pwa содержит шаблоны для кастомизации service-worker.js, register-service-worker.js и манифеста.
  • Возможна интеграция с Vue Router и Vuex для динамического кеширования контента.
  • Параметры quasar.conf.js позволяют гибко управлять режимом генерации и опциями Workbox, не меняя основного кода приложения.

Service Worker в Quasar предоставляет мощный инструмент для создания полностью оффлайн-готовых приложений с кешированием, push-уведомлениями и стратегиями обновления ресурсов, что делает PWA надежным и производительным.

Оглавление