Генерация нескольких Service Worker для разных разделов

Библиотека Sw-precache предоставляет возможность автоматической генерации Service Worker для кэширования ресурсов веб-приложений, что улучшает производительность и оффлайн-доступ. В крупных проектах возникает необходимость разделять кэширование по различным разделам сайта, чтобы уменьшить размер одного Service Worker и изолировать кэш отдельных частей приложения.

Основные принципы разделения Service Worker

  1. Изоляция кэша по разделам Каждый раздел сайта может иметь собственный Service Worker с индивидуальными правилами кэширования. Это позволяет:

    • Загружать критические ресурсы быстрее;
    • Снижать вероятность конфликта при обновлении кэша;
    • Уменьшать размер манифеста кэша.

  2. Уникальные имена кэша Для каждого Service Worker необходимо задавать отдельное имя кэша (cacheId). Это предотвращает пересечение кэшей разных разделов. Например:

    var swPrecacheMain = require('sw-precache');

swPrecache.write('service-worker-main.js', {
  staticFileGlobs: [
    'main/**/*.js',
    'main/**/*.css',
    'main/**/*.html'
  ],
  stripPrefix: 'main/',
  cacheId: 'main-section-cache'
});

swPrecache.write('service-worker-admin.js', {
  staticFileGlobs: [
    'admin/**/*.js',
    'admin/**/*.css',
    'admin/**/*.html'
  ],
  stripPrefix: 'admin/',
  cacheId: 'admin-section-cache'
});

  3. Отдельные точки регистрации Service Worker должен регистрироваться на уровне корня раздела. Это достигается путем указания пути при вызове navigator.serviceWorker.register():

    if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/main/service-worker-main.js');
  navigator.serviceWorker.register('/admin/service-worker-admin.js');
}

    Важно помнить, что Service Worker контролирует только те ресурсы, которые находятся в его области действия (scope), определяемой URL регистрации.

Настройка генерации через sw-precache

1. Указание путей к ресурсам (staticFileGlobs) Каждый Service Worker должен иметь список файлов для кэширования. Для разных разделов это могут быть отдельные каталоги или наборы файлов.

2. Исключение ненужных файлов (ignoreUrlParametersMatching) Позволяет исключать query-параметры, чтобы не создавать дублирующий кэш:

ignoreUrlParametersMatching: [/^utm_/, /^fbclid$/]

3. Настройка стратегии кэширования (runtimeCaching) Для динамических запросов можно задать стратегию кэширования для конкретного раздела:

runtimeCaching: [{
  urlPattern: /\/api\/main\//,
  handler: 'networkFirst'
}]

Для другого раздела можно использовать собственные URL-шаблоны и стратегии:

runtimeCaching: [{
  urlPattern: /\/api\/admin\//,
  handler: 'networkFirst'
}]

Управление обновлениями Service Worker

  1. Версионирование кэша Уникальные имена кэшей помогают безопасно обновлять ресурсы без удаления других разделов:

    cacheId: 'main-section-cache-v2'

  2. Обновление Service Worker После изменения ресурсов Service Worker автоматически обновляет кэш при следующем посещении раздела. Можно использовать событие onupdatefound для уведомления о новых версиях:

    navigator.serviceWorker.register('/main/service-worker-main.js')
  .then(reg => {
    reg.onupdatefo und = () => {
      const newWorker = reg.installing;
      newWorker.onstatecha nge = () => {
        if (newWorker.state === 'installed') {
          console.log('Новая версия Main Section доступна');
        }
      };
    };
  });

Практические рекомендации

  • Минимизировать перекрытия: исключать файлы, которые дублируются в нескольких разделах.
  • Использовать разные стратегии для разных типов ресурсов: статические файлы кэшировать cacheFirst, динамические — networkFirst.
  • Регистрация по scope: каждый Service Worker должен управлять только своим разделом, иначе возможны конфликты.
  • Мониторинг размера кэша: разделение на несколько Service Worker позволяет держать кэш каждого раздела компактным и управляемым.

Пример структуры проекта с несколькими Service Worker

/main/
  index.html
  app.js
  style.css
  service-worker-main.js

/admin/
  dashboard.html
  admin.js
  admin.css
  service-worker-admin.js

Для каждого раздела создается свой Service Worker с индивидуальным списком файлов и настройками, что позволяет гибко управлять кэшированием и обновлениями.

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

Оглавление