Service Worker в Angular

Service Worker обеспечивает поддержку offline-first приложений, управление кэшированием и фоновыми задачами, интегрируется с Angular через пакет @angular/service-worker.

Настройка

  1. Добавление пакета:
ng add @angular/pwa

Эта команда автоматически:

  • Добавляет @angular/service-worker в проект.
  • Создаёт файл конфигурации ngsw-config.json.
  • Включает необходимые изменения в angular.json.
  1. Включение Service Worker в приложении:
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
      registrationStrategy: 'registerWhenStable:30000'
    })
  ]
})
export class AppModule {}
  • enabled активирует SW только в production-сборках.
  • registrationStrategy задаёт стратегию регистрации: задержка, после стабильности приложения или сразу при старте.

Конфигурация кэша

Файл ngsw-config.json содержит правила кэширования:

  • assetGroups — определяют статические ресурсы приложения.

    {
  "name": "app",
  "installMode": "prefetch",
  "resources": {
    "files": ["/favicon.ico", "/index.html", "/*.css", "/*.js"]
  }
}

  • dataGroups — настраивают кэширование API-запросов.

    {
  "name": "api-cache",
  "urls": ["/api/**"],
  "cacheConfig": {
    "strategy": "freshness",
    "maxSize": 100,
    "maxAge": "1h",
    "timeout": "10s"
  }
}

Стратегии кэширования

  1. performance — отдаёт данные из кэша, обновляет их в фоне.
  2. freshness — делает запрос к серверу, если ответ слишком старый, иначе использует кэш.

Обновление приложения

Service Worker автоматически проверяет новые версии приложения. Для принудительного обновления можно использовать сервис SwUpdate:

import { SwUpdate } from '@angular/service-worker';

constructor(private swUpdate: SwUpdate) {
  if (this.swUpdate.isEnabled) {
    this.swUpdate.available.subscribe(() => {
      this.swUpdate.activateUpdate().then(() => document.location.reload());
    });
  }
}

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

  • В production рекомендуется предзагрузка критических ресурсов (installMode: 'prefetch').
  • Для API-запросов лучше использовать freshness с ограничением времени жизни кэша, чтобы пользователи всегда получали актуальные данные.
  • Тщательно тестировать работу офлайн и стратегию обновления, чтобы избежать конфликтов кэшированных данных с новыми версиями приложения.
Оглавление