Service Workers и кеширование

Angular предоставляет встроенную поддержку Service Workers, позволяющую создавать Progressive Web Apps (PWA) с оффлайн-режимом и эффективным кешированием ресурсов. Для этого используется пакет @angular/service-worker.

Регистрация Service Worker

Service Worker подключается через ng add @angular/pwa. В проект добавляется файл ngsw-config.json, в котором задаются правила кеширования:

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "images",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/images/**"
        ]
      }
    }
  ]
}
  • installMode: prefetch – ресурсы кешируются сразу при установке приложения.
  • installMode: lazy – ресурсы кешируются только при первом запросе.
  • updateMode: prefetch – обновление кеша происходит автоматически при новой версии.

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

Angular Service Worker поддерживает две ключевые стратегии:

  1. Cache-first – сначала проверяется кеш, если ресурс найден, используется он; в противном случае делается запрос к сети.
  2. Network-first – сначала идет запрос к сети, если он неудачен, используется кеш. Подходит для динамических данных.

Пример кеширования динамических API-запросов:

{
  "dataGroups": [
    {
      "name": "api-data",
      "urls": [ "/api/**" ],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 100,
        "maxAge": "1h",
        "timeout": "10s"
      }
    }
  ]
}
  • strategy: freshness – network-first подход.
  • maxSize – максимальное количество элементов в кеше.
  • maxAge – время хранения ресурса в кеше.
  • timeout – время ожидания ответа от сети перед использованием кеша.

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

Angular 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());
    });
  }
}

Это обеспечивает автоматическую загрузку новой версии приложения без необходимости ручного обновления пользователем. Сочетание Service Workers и эффективного кеширования повышает производительность, снижает задержки и делает приложение доступным оффлайн.

Оглавление