Модули JavaScript в Service Workers 2026: оффлайн-кэш и фоновые задачи

[kirilljsx]

Модули JavaScript в Service Workers - это прорыв для веб-приложений. Теперь можно разбивать код на файлы с import/export прямо в фоновом скрипте. Это решает проблему монолитного кода, который разрастается в больших PWA.

Зачем это нужно? Оффлайн-кэширование становится проще, фоновые задачи - надежнее. Приложения работают без сети, синхронизируют данные в фоне. Разработчики экономят время на рефакторинге и отладке.

Регистрация модульного Service Worker

Регистрация модульного SW простая: добавь опцию { type: ‘module’ } в navigator.serviceWorker.register. Браузеры вроде Chrome и Firefox поддерживают это с 2026 года на полной мощности. Код загружается как ES-модули, без глобальных переменных и спагетти.

Раньше SW писали как классический JS - все в одном файле, зависимости через глобалы. Теперь импортируй функции из отдельных модулей: один для кеша, другой для sync. Это ускоряет разработку и упрощает тестирование. Логично перейти к примерам.

• navigator.serviceWorker.register(‘/sw.js’, { type: ‘module’ }) - базовая регистрация, SW готов к модулям.
• import { cacheAssets } from ‘./cache.js’; - импортируй логику кеширования в sw.js.
• self.addEventListener(‘install’, cacheAssets); - используй импортированную функцию на событии.
• Нюанс: всегда добавляй event.waitUntil(prom), чтобы SW не завершился преждевременно.

Сравнение подходов	Классический SW	Модульный SW
Структура кода	Монолит, глобалы	Модули, import/export
Масштабируемость	Плохо для больших проектов	Отлично, разбивка на файлы
Поддержка браузеров	Все	Chrome/Edge 91+, Firefox 147+ (2026)

Автоматизация оффлайн-кэширования

Оффлайн-кэш в модульных SW - это комбо из Cache API и стратегий. Импортируй модуль с precache, который кеширует assets на install. При fetch проверяй кеш первым, потом сеть - классика offline-first.

Пример: модуль cache.js с функцией preCache([‘/app.js’, ‘/styles.css’]). В sw.js импортируй и вызови на ‘install’. Для динамического кеша - в ‘fetch’ сохраняй ответы. Это работает стабильно даже в 2026, когда PWA на каждом втором сайте.

• Статический кеш: preCache([‘/manifest.json’, ‘/icons/*’]) - базовые файлы всегда в кеше.
• Динамический кеш: event.respondWith(caches.match(req).then(…)) - проверка и сохранение.
• Стратегия network-first: иди в сеть, если нет - из кеша, обнови фоном.
• Важно: используй Cache.put с клонированием response для избежания ошибок.

Стратегия	Когда применять	Пример модуля
Cache-first	Статические assets	preCache([‘js/*’])
Network-first	API с fallback	fetchApiHandler
Stale-while-revalidate	Новости, посты	dynamicCache

Фоновые задачи с Background Sync и Push

Фоновые задачи оживают с модулями: Background Sync API регистрирует задачи, SW выполнит при сети. Импортируй syncHandler из sync.js, регистрируй на клиенте self.registration.sync.register(‘data-sync’).

Push-уведомления проще: модуль push.js с обработчиком ‘push’. SW показывает уведомление, кликает - открывает URL. В 2026 это стандарт для чатов и соцсетей. Комбинируй с Periodic Background Sync для регулярных обновлений.

• Background Sync: self.registration.sync.register(‘sync-posts’) - синхронизирует очередь оффлайн-задач.
• Push события: self.addEventListener(‘push’, import(‘./push.js’).then(m => m.handlePush(event))); - асинхронный импорт.
• Periodic Sync: navigator.serviceWorker.ready.then(reg => reg.periodicSync.register(‘update-feed’)) - ежедневные обновления.
• Нюанс: sync работает только если приложение установлено как PWA.

import { handleSync } from './sync.js';

self.addEventListener('sync', event => {
  if (event.tag === 'data-sync') {
    event.waitUntil(handleSync());
  }
});

Что меняет модульность для PWA в 2026

Модули в SW превращают фоновые скрипты в полноценные приложения. Кэш, sync и push разбиваются на логические блоки, код чистый и testable. Осталось место для топикальных расширений вроде комбо с WebAssembly.

В 2026 это норма: браузеры унифицировали поддержку, инструменты вроде Vite генерят модульные SW из коробки. Подумай о миграции старых проектов - окупается сторицей в скорости и надежности.