Установка PWA на устройства

Прогрессивные веб-приложения (PWA) обеспечивают работу веб-приложений в офлайн-режиме и возможность установки на устройство с использованием стандартного механизма браузеров. Angular упрощает интеграцию PWA через пакет @angular/pwa.

Добавление поддержки PWA

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

ng add @angular/pwa

Команда автоматически выполняет несколько действий:

  • Добавляет сервис-воркеры для кэширования ресурсов.
  • Создает файл manifest.webmanifest с метаданными приложения.
  • Обновляет index.html ссылкой на манифест и мета-теги для мобильных устройств.
  • Настраивает файлы иконок разных размеров для установки на устройство.

Файл манифеста

Файл manifest.webmanifest содержит ключевые параметры:

  • name и short_name — полное и сокращенное имя приложения.
  • icons — массив иконок с указанием размеров и формата.
  • start_url — URL, который откроется при запуске приложения с устройства.
  • display — режим отображения (standalone, fullscreen, minimal-ui).
  • theme_color и background_color — цветовая схема приложения.

Пример конфигурации:

{
  "name": "Angular PWA App",
  "short_name": "PWAApp",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#1976d2",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Кэширование и офлайн-доступ

Angular PWA использует Angular Service Worker для автоматического кэширования статических ресурсов. Конфигурация находится в файле ngsw-config.json, где задаются стратегии кэширования:

  • performance — быстрый доступ из кэша, обновление на фоне.
  • freshness — приоритет обновленных данных с сервера.

Пример:

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

Установка на устройства

После развертывания PWA можно установить приложение на устройства:

  • В браузере Chrome или Edge появляется значок «Установить» на панели адреса.
  • На мобильных устройствах появляется предложение добавить на главный экран.
  • После установки приложение запускается в отдельном окне без элементов браузера, как нативное.

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

Оглавление