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

Манифест веб-приложения — это JSON-файл, который содержит метаданные о приложении: название, иконки, цвета, режим отображения и ориентацию. Он является ключевым компонентом для прогрессивных веб-приложений (PWA), обеспечивая интеграцию с системным интерфейсом и улучшая пользовательский опыт при установке на устройства.

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

Файл манифеста обычно имеет имя manifest.json и располагается в корне проекта или в папке public. Основные поля, используемые в манифесте:

  • name – полное название приложения. Отображается в установленных приложениях и в системных интерфейсах.

  • short_name – сокращённое название, используется при ограниченном пространстве, например, на иконках рабочего стола.

  • start_url – URL, с которого приложение открывается при запуске. Может включать параметры навигации или точки входа.

  • display – режим отображения приложения:

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

  • background_color – цвет фона, используемый при запуске приложения до загрузки основной страницы.

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

  • icons – массив объектов с иконками различных размеров и форматов. Пример объекта иконки:

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

Проверка корректности манифеста в Lighthouse

Lighthouse оценивает манифест на соответствие стандартам PWA. Основные критерии проверки:

  1. Наличие манифеста – отсутствие manifest.json или некорректная ссылка в приводит к потере баллов.
  2. Обязательные поля – name или short_name, start_url, icons должны быть корректно заполнены.
  3. Размеры иконок – рекомендуются размеры 192x192 и 512x512 пикселей для разных устройств. Lighthouse проверяет наличие хотя бы одного подходящего размера.
  4. Совместимость цветов – theme_color и background_color должны обеспечивать контраст с текстовыми элементами на экране загрузки.

Примеры продвинутого использования

  • Многоразмерные иконки – для оптимального отображения на различных устройствах указывают несколько размеров иконок:

    "icons": [
  { "src": "/icons/icon-48.png", "sizes": "48x48", "type": "image/png" },
  { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
]

  • Настройка режима отображения под разные сценарии – комбинирование display и orientation позволяет контролировать поведение приложения на мобильных устройствах, например:

    "display": "standalone",
"orientation": "portrait-primary"

  • Использование scope – поле scope ограничивает URL-адреса, в рамках которых приложение будет работать как PWA, предотвращая случайное открытие сторонних страниц в режиме standalone:

    "scope": "/app/"

Интеграция манифеста с HTML

Файл манифеста подключается в HTML-документа с помощью тега :

Это обеспечивает корректное распознавание браузером и улучшает совместимость с сервис-воркерами.

Влияние манифеста на оценку Lighthouse

Lighthouse оценивает следующие аспекты:

  • Наличие и корректность манифеста.
  • Доступность и качество иконок.
  • Цветовую совместимость интерфейса и фона.
  • Совместимость с мобильными устройствами и возможностью установки приложения.

Высокие показатели по этим критериям напрямую влияют на общую оценку PWA, а также на пользовательский опыт при установке и запуске приложения на разных платформах.

Оглавление