Зачем нужен manifest.json?

Зачем нужен manifest.json?

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

Основные функции manifest.json

1. Идентификация приложения Файл содержит базовую информацию о приложении:

• name и short_name — полное и краткое имя приложения
• description — описание функциональности
• start_url — URL, на который приложение переходит при запуске
• scope — область навигации приложения

{
  "name": "My Awesome App",
  "short_name": "Awesome",
  "description": "A progressive web application",
  "start_url": "/",
  "scope": "/"
}

2. Визуальное представление Manifest определяет внешний вид приложения на экране устройства:

• icons — иконки различных размеров для рабочего стола, панели задач, сплеша при загрузке
• theme_color — цвет тема приложения (адресная строка в браузере)
• background_color — цвет фона при загрузке приложения

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

3. Режимы отображения Свойство display контролирует, как приложение выглядит при запуске:

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

4. Ориентация экрана Свойство orientation указывает предпочтительную ориентацию:

"orientation": "portrait-primary"

Практическое применение

Когда manifest.json становится необходимым:

1. Установка на главный экран — пользователи могут установить PWA как приложение на рабочий стол или мобильный телефон
2. Автономная работа — в сочетании с Service Workers приложение может работать оффлайн
3. Уведомления и фон — возможность получать пуш-уведомления и синхронизировать данные в фоне
4. Полноэкранный режим — приложение запускается как нативное, без адресной строки браузера

Связь с Service Worker

Service Worker и manifest.json работают вместе для создания полноценного PWA. Service Worker обеспечивает кеширование и оффлайн-функциональность, а manifest.json определяет, как приложение представляется пользователю.

Указание manifest в HTML

Файл manifest нужно подключить в head документа:

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

Без этого линка браузер не будет загружать и обрабатывать manifest, и установка приложения будет недоступна.

Заключение

manifest.json — неотъемлемая часть современной веб-разработки, особенно если вы хотите, чтобы ваше приложение было установляемым и работало на уровне нативных приложений. Это файл, который делает веб-приложение по-настоящему прогрессивным.