Сервис-воркер (Service Worker) — это скрипт, работающий в фоновом режиме вне основного потока браузера. Он перехватывает сетевые запросы, управляет кэшированием и позволяет реализовать offline-режим, push-уведомления и другие возможности, характерные для Progressive Web App (PWA). В Angular поддержка PWA реализована через встроенный пакет @angular/service-worker, который обеспечивает автоматическое подключение сервис-воркера и управление кэшем на основе конфигурационного файла.

1. Основы работы сервис-воркера

Сервис-воркер — это прокси между браузером и сетью. Его основные функции:

• Кэширование HTML, CSS, JS, API-ответов.

• Работа в offline-режиме.

• Управление обновлениями.

• Push-уведомления и фоновая синхронизация.

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

• Работает на отдельном потоке.

• Не имеет доступа к DOM.

• Может обслуживать запросы даже при отсутствии интернета.

• Привязан к определённому origin и пути.

2. Добавление PWA в Angular-проект

Для добавления сервис-воркера используется Angular CLI:

ng add @angular/pwa

Эта команда:

• Устанавливает @angular/service-worker.

• Добавляет ngsw-config.json.

• Обновляет angular.json (добавляет serviceWorker: true для production).

• Создаёт manifest.webmanifest (иконки, название и т. д.).

3. Конфигурация angular.json

В разделе projects > architect > build > configurations > production:

"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"

Service Worker активируется только в production-сборке (ng build --prod).

4. Конфигурация ngsw-config.json

Это основной файл конфигурации сервис-воркера. Он управляет тем, что и как будет кэшироваться.

Пример:

{
"index": "/index.html",
"assetGroups": \[
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": \[
"/favicon.ico",
"/index.html",
"/\*.css",
"/\*.js"
\]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": \["/assets/\*\*", "/\*.(png|jpg|jpeg|svg|webp)"\]
}
}
\],
"dataGroups": \[
{
"name": "api-calls",
"urls": \["/api/\*\*"\],
"cacheConfig": {
"maxSize": 100,
"maxAge": "6h",
"timeout": "10s",
"strategy": "performance"
}
}
\]
}

Ключевые параметры:

• installMode: prefetch — ресурсы загружаются сразу.

• installMode: lazy — ресурсы загружаются при первом запросе.

• updateMode: prefetch — обновления загружаются сразу при обнаружении новой версии.

• strategy: freshness | performance — выбор между приоритетом сети или кэша.

5. Сценарии использования

Кэширование статических файлов

Содержимое из assetGroups кэшируется при установке.

Кэширование динамических API-запросов

Настраивается в dataGroups, например:

• Стратегия performance: ответ из кэша, затем обновление.

• Стратегия freshness: сначала сеть, потом кэш.

6. Установка и регистрация сервис-воркера

В main.ts Angular CLI автоматически добавляет регистрацию:

if (environment.production) {
platformBrowserDynamic()
.bootstrapModule(AppModule)
.then(() => navigator.serviceWorker.register('/ngsw-worker.js'));
}

Если используется @angular/service-worker, Angular сам управляет регистрацией.

7. Работа с SwUpdate

Angular предоставляет сервис SwUpdate для управления обновлениями приложения:

constructor(private swUpdate: SwUpdate) {
if (this.swUpdate.isEnabled) {
this.swUpdate.available.subscribe(() => {
if (confirm("Новая версия доступна. Обновить?")) {
window.location.reload();
}
});
}
}

Сценарий:

• Пользователь загружает приложение.

• Выходит новая сборка.

• SwUpdate обнаруживает обновление.

• Предлагается обновить страницу.

8. Offline поддержка

Если все необходимые ресурсы закэшированы, приложение может работать offline. Angular Service Worker обслуживает запросы даже без соединения с сетью, пока контент есть в кэше.

Рекомендации:

• Добавить index.html, *.js, *.css, assets/** в assetGroups.

• Настроить dataGroups для API с кэш-стратегиями.

• Убедиться, что все страницы SPA обрабатываются Angular Router.

9. Manifest и A2HS

manifest.webmanifest описывает, как приложение выглядит при установке:

{
"name": "My Angular PWA",
"short_name": "MyPWA",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"start_url": "/",
"icons": \[
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
...
\]
}

После добавления манифеста и сервис-воркера, браузер предложит установить приложение на рабочий стол (Add To Home Screen — A2HS).

10. Проверка PWA

Откройте приложение в Chrome:

• Откройте DevTools → Application → Service Workers.

• Проверьте, зарегистрирован ли воркер.

• Переключитесь в offline-режим и обновите.

• Используйте вкладку Lighthouse для анализа.

11. Удаление или обновление кэша

Service Worker в Angular сам удаляет старые кэши на основе ngsw.json. Однако при глобальных изменениях структуры лучше инвалидацию делать через ngswConfigPath и перезапуск CI/CD.

Для ручного сброса:

this.swUpdate.activateUpdate().then(() => document.location.reload());

12. Ограничения Angular Service Worker

• Не поддерживает custom-воркеры напрямую.

• Нет полной гибкости как в Workbox.

• Обновления могут применяться не мгновенно, если вкладка открыта.

13. Интеграция push-уведомлений

Сервис-воркер можно использовать для push-уведомлений через Push API, но Angular CLI не предоставляет встроенной реализации — нужна ручная настройка с использованием Notification API и Web Push.

14. Сборка PWA

ng build --configuration production

После сборки в /dist/ будет файл:

• ngsw.json — карта кэширования.

• ngsw-worker.js — воркер.

• Статические файлы, определённые в ngsw-config.json.

Сервис-воркер в Angular позволяет реализовать надёжные PWA-приложения с offline-доступом, мгновенной загрузкой, кэшированием и управлением версиями. Angular CLI автоматизирует большую часть работы, обеспечивая разработчику только настройку правил и внедрение логики обновлений.