Настройка sourcemap для сервис-воркера

Основы Sourcemap для сервис-воркеров

Sourcemap — это файл, который позволяет браузеру сопоставлять скомпилированный или минифицированный код с исходным исходником. В контексте сервис-воркеров это особенно важно для отладки: без sourcemap стек вызовов и ошибки будут указывать на минифицированный код, что значительно усложняет диагностику.

В Workbox настройка sourcemap начинается с конфигурации сборщика (Webpack, Rollup или другой). По умолчанию Workbox использует сгенерированные JavaScript-файлы сервис-воркера, и если в процессе сборки не включен генератор sourcemap, ошибки в runtime будут трудно интерпретировать.

Интеграция с Webpack

Workbox интегрируется с Webpack через плагин WorkboxWebpackPlugin. Для генерации sourcemap необходимо включить соответствующие опции как в Webpack, так и в самом Workbox:

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

module.exports = {
  mode: 'production',
  devtool: 'source-map', // Включение генерации sourcemap для сборки
  plugins: [
    new GenerateSW({
      swDest: 'service-worker.js',
      sourcemap: true, // Специфическая опция Workbox для включения sourcemap
      clientsClaim: true,
      skipWaiting: true
    })
  ]
};

Ключевые моменты:

  • devtool: 'source-map' — основной механизм Webpack для генерации sourcemap.
  • Опция sourcemap: true в Workbox необходима для того, чтобы ссылочный комментарий на sourcemap был добавлен в финальный service-worker.js.
  • Если сборка минифицирована, sourcemap позволит трассировать ошибки обратно в оригинальные модули.

Интеграция с Rollup

В случае использования Rollup, настройка sourcemap для сервис-воркера происходит через rollup-plugin-workbox или обычный rollup-plugin-terser. Пример конфигурации:

import { generateSW } from 'rollup-plugin-workbox';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/service-worker.js',
  output: {
    file: 'dist/service-worker.js',
    format: 'iife',
    sourcemap: true // Генерация sourcemap Rollup
  },
  plugins: [
    terser({
      format: {
        comments: false
      },
      sourcemap: true
    }),
    generateSW({
      swDest: 'dist/service-worker.js',
      sourcemap: true
    })
  ]
};

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

  • Rollup генерирует собственный sourcemap через sourcemap: true в output.
  • Плагин Workbox должен наследовать этот sourcemap, чтобы финальный файл включал корректную ссылку.
  • Минификация через terser не уничтожает sourcemap при правильной настройке.

Отладка сервис-воркера с sourcemap

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

  1. В Chrome DevTools откройте Application → Service Workers.
  2. Найдите активный сервис-воркер и кликните “Inspect”.
  3. В открывшемся окне Sources появится дерево исходных файлов вместо минифицированного кода.
  4. Ошибки и console.log будут ссылаться на исходный код, что облегчает поиск проблем в обработчиках fetch, routing и caching.

Работа с путями sourcemap

Иногда возникает ситуация, когда финальный service-worker.js находится в другой директории, а браузер не может найти sourcemap. Для корректной работы необходимо:

  • Проверить, что //# sourceMappingURL=service-worker.js.map корректно указывает на расположение файла.
  • Если используется CDN, необходимо чтобы sourcemap был доступен по тому же URL, что и сервис-воркер.

Оптимизация производительности

Sourcemap увеличивает размер файла, что критично для сервис-воркера, так как он загружается при каждой регистрации. В продакшн-сборках рекомендуется:

  • Хранить sourcemap отдельно и включать его только в режиме отладки (development).
  • Использовать условное подключение sourcemap:
new GenerateSW({
  swDest: 'service-worker.js',
  clientsClaim: true,
  skipWaiting: true,
  sourcemap: process.env.NODE_ENV === 'development'
});

Поддержка sourceURL для inline-скриптов

Если сервис-воркер содержит inline-скрипты, можно добавить директиву //# sourceURL=имя_файла для улучшения трассировки:

self.addEventListener('fetch', event => {
  console.log('Fetch event', event);
});
//# sourceURL=service-worker.js

Это особенно полезно при динамическом формировании сервис-воркера через шаблоны или сборщики.

Советы по совместимости

  • Sourcemap поддерживается всеми современными браузерами (Chrome, Firefox, Edge, Safari), но Safari иногда некорректно отображает ошибку в сервис-воркере при минификации. В этом случае помогает проверка через DevTools → Network → Service Worker.
  • При использовании Workbox injectManifest и кастомного сервис-воркера убедиться, что исходный файл указан корректно, а опция sourcemap: true не конфликтует с плагинами минификации.
Оглавление