Манифест веб-приложения

Манифест веб-приложения (manifest.json) является стандартом W3C и используется для управления метаданными PWA (Progressive Web App). Он определяет внешний вид и поведение приложения при установке на устройство, включая значки, ориентацию экрана, цветовую схему и начальный URL.

Структура манифеста

Основные поля:

  • name и short_name — полные и сокращённые названия приложения.

  • start_url — адрес, с которого приложение будет запускаться.

  • display — режим отображения:

    • fullscreen — полноэкранный режим без UI браузера.
    • standalone — режим с минимальным UI, напоминающий нативное приложение.
    • minimal-ui — слегка сокращённый интерфейс браузера.
    • browser — обычное отображение в браузере.

  • background_color — цвет фона во время загрузки.

  • theme_color — основной цвет интерфейса и элементов системы.

  • icons — массив объектов с иконками разного разрешения:

{
  "src": "assets/icons/icon-192.png",
  "sizes": "192x192",
  "type": "image/png"
}

Интеграция с Angular

Для подключения манифеста достаточно поместить файл manifest.json в src/ и добавить ссылку в index.html:

<link rel="manifest" href="manifest.json">

В Angular CLI также можно автоматизировать генерацию манифеста через PWA-схему:

ng add @angular/pwa

Это создаёт стандартный manifest.webmanifest, сервис-воркер и конфигурацию для поддержки офлайн-режима.

Взаимодействие с сервис-воркером

Манифест тесно связан с service worker, который обеспечивает кэширование и офлайн-доступ. Цвета и значки из манифеста влияют на экран загрузки приложения и иконки на домашнем экране устройства. Правильная настройка display и start_url позволяет создавать ощущение нативного приложения на мобильных устройствах.

Поддержка разных платформ

Разные платформы читают манифест по-разному:

  • Android: полная поддержка всех полей, включая цвета и значки.
  • iOS: ограниченная поддержка, некоторые поля игнорируются, используются мета-теги Apple.

Для кроссплатформенной совместимости рекомендуется комбинировать manifest.json с мета-тегами:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Эта комбинация обеспечивает единообразный опыт пользователя на всех устройствах.

Оглавление