Локальная разработка на localhost

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

Установка и подключение

Для установки sw-precache используется npm:

npm install --save-dev sw-precache

После установки библиотеку можно подключать через скрипт Node.js или использовать через конфигурационный файл. Обычно создается отдельный файл, например generate-service-worker.js, который будет отвечать за генерацию сервис-воркера:

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

swPrecache.write(path.join(__dirname, 'service-worker.js'), {
  staticFileGlobs: [
    'index.html',
    'css/**/*.css',
    'js/**/*.js',
    'images/**/*.{png,jpg,gif,svg}'
  ],
  stripPrefix: __dirname
}, (err) => {
  if (err) {
    console.error('Ошибка генерации сервис-воркера:', err);
  } else {
    console.log('Service worker успешно создан');
  }
});

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

  • staticFileGlobs — массив шаблонов файлов, которые будут кэшироваться. Можно использовать wildcard-паттерны (**/*).
  • stripPrefix — удаляет указанный путь из ключей кэша, чтобы пути в сервис-воркере соответствовали структуре URL приложения.

Настройка локального сервера

Для тестирования сервис-воркера на localhost необходимо, чтобы приложение обслуживалось через HTTP-сервер, а не просто открывалось как файл (file://). Самые простые варианты:

  1. http-server:
npm install -g http-server
http-server ./ -p 8080
  1. express:
const express = require('express');
const app = express();
const port = 8080;

app.use(express.static(__dirname));

app.listen(port, () => {
  console.log(`Сервер запущен на http://localhost:${port}`);
});

Сервис-воркер корректно регистрируется только через протокол http или https. На file:// он работать не будет.

Регистрация сервис-воркера в приложении

В JavaScript для регистрации сервис-воркера используется стандартный API:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker зарегистрирован с областью:', registration.scope);
    })
    .catch(function(error) {
      console.error('Ошибка при регистрации Service Worker:', error);
    });
}

Особенности при локальной разработке:

  • После изменения файлов необходимо перегенерировать сервис-воркер.
  • Для тестирования обновлений можно использовать registration.update() или удалить кэш вручную через DevTools.

Кэширование и стратегия обновления

sw-precache позволяет настроить поведение кэша через опции:

  • navigateFallback — указание fallback-страницы для SPA-приложений.
  • ignoreUrlParametersMatching — массив регулярных выражений для игнорирования параметров URL при кэшировании.
  • runtimeCaching — возможность кэшировать динамический контент, например запросы к API.

Пример с fallback для SPA:

swPrecache.write(path.join(__dirname, 'service-worker.js'), {
  staticFileGlobs: [
    'index.html',
    'css/**/*.css',
    'js/**/*.js',
  ],
  stripPrefix: __dirname,
  navigateFallback: 'index.html'
});

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

В Chrome DevTools вкладка Application → Service Workers позволяет:

  • Проверить регистрацию сервис-воркера.
  • Удалять и обновлять кэш.
  • Включать режим «Bypass for network», чтобы временно отключить кэш.
  • Отслеживать загрузку файлов из кэша и сетевых запросов.

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

  • Использовать уникальные хэши в именах файлов (bundle.[hash].js) или
  • Перегенерировать сервис-воркер при каждом изменении файлов.

Интеграция с инструментами сборки

sw-precache удобно интегрируется с Gulp или Webpack:

Gulp-пример:

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

gulp.task('generate-service-worker', function(callback) {
  swPrecache.write('service-worker.js', {
    staticFileGlobs: [
      'dist/**/*.{js,html,css,png,jpg,gif,svg}'
    ],
    stripPrefix: 'dist'
  }, callback);
});

Это позволяет автоматически обновлять сервис-воркер при сборке проекта на localhost.

Особенности поведения на localhost

  • Service Worker регистрируется даже на http://localhost, что позволяет тестировать оффлайн-режим без HTTPS.
  • Кэш сохраняется между перезапусками локального сервера до его явного удаления.
  • Браузеры могут агрессивно кешировать сервис-воркер, поэтому важно регулярно тестировать логику обновлений.

Лучшие практики локальной разработки

  • Генерировать сервис-воркер после каждого изменения статических файлов.
  • Использовать dev-опции кэширования с коротким сроком жизни при активной разработке.
  • Следить за консолью DevTools на предмет ошибок регистрации сервис-воркера и конфликтов кэша.
  • Тестировать SPA с navigateFallback, чтобы убедиться, что маршрутизация работает оффлайн.

Использование sw-precache на localhost обеспечивает максимально приближенное к продакшн поведение приложения, позволяет выявлять ошибки кэширования и отлаживать оффлайн-функциональность до развертывания.

Оглавление