Оффлайн функциональность

Создание приложений, работающих оффлайн, требует интеграции нескольких технологий, основная из которых в Angular — Service Worker. Он обеспечивает кэширование ресурсов и управление запросами в отсутствие интернет-соединения.

Настройка Service Worker

  1. Установка Angular PWA:
ng add @angular/pwa

Команда добавляет поддержку сервис-воркера, создает ngsw-config.json и обновляет angular.json.

  1. Конфигурация ngsw-config.json: Файл содержит правила кэширования:
  • assetGroups — статические ресурсы приложения.
  • dataGroups — динамические запросы к API.

Пример кэширования API данных:

{
  "name": "api-cache",
  "urls": ["/api/**"],
  "cacheConfig": {
    "strategy": "performance",
    "maxSize": 100,
    "maxAge": "6h"
  }
}

Стратегия performance сначала использует кэш, если есть, а затем обновляет данные из сети.

Обработка оффлайн-событий

Angular предоставляет сервис SwUpdate, который позволяет отслеживать состояние обновлений приложения:

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

Это гарантирует, что пользователи будут видеть актуальную версию приложения даже после перехода в онлайн.

Кэширование динамического контента

Для приложений с частыми API-запросами используется комбинация dataGroups и стратегий обновления:

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

Индикаторы оффлайн-режима

Для улучшения UX можно использовать сервисы, отслеживающие состояние соединения:

fromEvent(window, 'online').subscribe(() => console.log('Сеть восстановлена'));
fromEvent(window, 'offline').subscribe(() => console.log('Нет подключения'));

Это позволяет динамически изменять интерфейс и уведомлять пользователя о состоянии приложения.

В Angular временные функции анимаций и оффлайн-функциональность тесно интегрируются с архитектурой приложения. Правильное использование этих инструментов обеспечивает плавные интерфейсы и надежность работы в любых условиях сети.

Оглавление