Обработка вложенных маршрутов и динамических сегментов

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

Обработка вложенных маршрутов

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

Пример конфигурации для вложенных маршрутов:

const swPrecache = require('sw-precache');

swPrecache.write('service-worker.js', {
  staticFileGlobs: [
    'dist/**/*.html',
    'dist/css/**/*.css',
    'dist/js/**/*.js',
    'dist/images/**/*.{png,jpg,gif,svg}'
  ],
  stripPrefix: 'dist/',
  navigateFallback: '/index.html'
});
  • staticFileGlobs позволяет указать шаблоны для всех файлов, которые необходимо кэшировать, включая файлы в любых поддиректориях (**/*).
  • stripPrefix удаляет указанную часть пути при добавлении ресурсов в кэш, чтобы пути в Service Worker были корректными.
  • navigateFallback задает fallback для SPA, чтобы вложенные маршруты корректно обрабатывались при оффлайн-доступе.

Динамические сегменты маршрутов

Для современных веб-приложений часто используются динамические сегменты маршрутов, например /users/:id или /products/:category/:id. Sw-precache напрямую не поддерживает шаблоны с параметрами в путях, однако есть несколько подходов для их обработки:

  1. Использование runtimeCaching

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

runtimeCaching: [{
  urlPattern: /\/users\/\d+/,
  handler: 'networkFirst'
}, {
  urlPattern: /\/products\/\w+\/\d+/,
  handler: 'cacheFirst'
}]

  • urlPattern — регулярное выражение, определяющее динамические URL.

  • handler — стратегия кэширования:

    • cacheFirst — сначала проверяет кэш, затем сеть,
    • networkFirst — сначала пытается загрузить из сети, при ошибке использует кэш.
  1. Использование navigateFallback для SPA

В приложениях с динамическими маршрутизаторами часто достаточно использовать один HTML-файл в качестве fallback для всех маршрутов:

navigateFallback: '/index.html',
navigateFallbackWhitelist: [/^\/users/, /^\/products/]
  • navigateFallbackWhitelist определяет, какие маршруты должны перенаправляться на fallback.
  • Это позволяет корректно обрабатывать переходы по динамическим сегментам при оффлайн-режиме.

Комбинация предзагрузки и runtime caching

Для оптимальной работы часто используется комбинация предзагрузки (staticFileGlobs) и runtime caching:

  • Статические ресурсы: CSS, JS, изображения, которые изменяются редко. Предзагружаются с помощью staticFileGlobs.
  • Динамические ресурсы: API-запросы, страницы с динамическим контентом. Обрабатываются через runtimeCaching с подходящей стратегией.

Пример комбинированной конфигурации:

swPrecache.write('service-worker.js', {
  staticFileGlobs: [
    'dist/**/*.html',
    'dist/css/**/*.css',
    'dist/js/**/*.js'
  ],
  stripPrefix: 'dist/',
  navigateFallback: '/index.html',
  runtimeCaching: [{
    urlPattern: /\/api\/.*/,
    handler: 'networkFirst'
  }]
});

Особенности обновления кэша

При работе с динамическими сегментами важно учитывать версионирование кэша. Sw-precache автоматически генерирует хэш для каждого файла, но для динамических URL рекомендуется:

  • Использовать networkFirst стратегию для API-запросов, чтобы получать свежие данные.
  • Регулярно обновлять Service Worker через событие install и activate, удаляя устаревшие кэши.
  • Для SPA — корректно обрабатывать fallback и обновления index.html, чтобы новые маршруты и изменения контента подхватывались автоматически.

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

  • Для крупных проектов рекомендуется разбивать staticFileGlobs на группы по типам файлов, чтобы облегчить управление кэшем.
  • Динамические сегменты лучше обрабатывать через регулярные выражения, а не пытаться кэшировать каждый вариант URL.
  • Проверять работу кэша в оффлайн-режиме через инструменты разработчика браузера, чтобы убедиться, что вложенные и динамические маршруты корректно обслуживаются.

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

Оглавление