Что такое Service Workers и PWA?angular-71

Service Workers: Фоновые процессоры браузера

Service Worker — это скрипт, который браузер запускает в отдельном фоновом потоке, независимо от веб-страницы. Это ключевая технология для создания Progressive Web Apps (PWA).

Основные возможности:

  • Кэширование ресурсов (файлов, API-ответов)
  • Фоновая синхронизация
  • Push-уведомления
  • Оффлайн-работа приложения

Как работает в Angular:

// ngsw-config.json - конфигурация кэширования
{
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": ["/*.css", "/*.js"]
      }
    }
  ]
}

Жизненный цикл Service Worker:

  1. Регистрация (navigator.serviceWorker.register())
  2. Установка (кэширование ресурсов)
  3. Активация (управление кэшем)
  4. Фетчинг (перехват сетевых запросов)

Progressive Web Apps : Веб-приложения нового поколения

PWA — это веб-приложения, которые используют современные API (включая Service Workers) для предоставления нативного пользовательского опыта.

Ключевые характеристики PWA:

  • Установка на домашний экран
  • Работа в оффлайн-режиме
  • Быстрая загрузка
  • Push-уведомления
  • Адаптивный дизайн

Превращение Angular-приложения в PWA:

ng add @angular/pwa --project your-project-name

Эта команда добавляет:

  1. ngsw-worker.js (Service Worker)
  2. manifest.webmanifest (конфигурация PWA)
  3. Иконки для установки
  4. Обновляет angular.json и index.html

Практическая реализация в Angular

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

// app.module.ts
import { ServiceWorkerModule } from '@angular/service-worker';

@NgModule({
  imports: [
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
      registrationStrategy: 'registerWhenStable:30000'
    })
  ]
})

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

{
  "appData": {
    "version": "1.0.0"
  },
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/favicon.ico", "/*.css", "/*.js"]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "api",
      "urls": ["/api/**"],
      "cacheConfig": {
        "maxSize": 100,
        "maxAge": "3d",
        "strategy": "freshness"
      }
    }
  ]
}

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

// app.component.ts
constructor(private updates: SwUpdate) {
  updates.versionUpdates.subscribe(evt => {
    if (evt.type === 'VERSION_READY') {
      if (confirm('Доступна новая версия. Обновить?')) {
        document.location.reload();
      }
    }
  });
}

Оптимизации и лучшие практики

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

    • freshness: Для часто меняющихся данных (API)
    • performance: Для статических ресурсов

  2. Оффлайн-страница:

{
  "navigationUrls": [
    {"positive": true, "regex": "^\\/.*$"},
    {"positive": false, "regex": "^\\/(?:auth|admin)\\/.*$"}
  ]
}
  1. Размер кэша:
"cacheConfig": {
  "maxSize": 20,
  "maxAge": "1h"
}

Резюмируем

Service Worker — это:

  • Фоновый скрипт для кэширования и оффлайн-работы
  • Основа для PWA в Angular
  • Механизм перехвата сетевых запросов

PWA — это:

  • Установочные веб-приложения
  • Нативный пользовательский опыт
  • Комбинация Service Worker + Web App Manifest

В Angular:

  1. Используйте @angular/pwa для быстрого старта
  2. Настройте ngsw-config.json под свои нужды
  3. Реализуйте стратегию обновлений через SwUpdate

Для успешного PWA:

  • Тестируйте оффлайн-режим
  • Оптимизируйте стратегии кэширования
  • Используйте Lighthouse для аудита

Средний прирост производительности после правильной реализации PWA — 40-60% по данным Lighthouse.

Вопросы

Собеседования