Манифест приложения — это структурированный файл с описанием ключевых свойств приложения: как оно называется, какую иконку показывает, в каком режиме открывается и как ведёт себя на устройстве пользователя. Для веб-приложений это обычно JSON-файл manifest.json, подключаемый к страницам сайта. Без него браузер не считает веб-приложение полноценно устанавливаемым: не предложит «Добавить на главный экран» как приложение, не покажет собственное окно вместо вкладки и не сможет корректно оформить ярлык.
Главный ориентир для понимания темы простой: манифест — это «паспорт» приложения. Операционная система и браузер читают его, чтобы понять, что за приложение перед ними и как его представить пользователю. Ниже разберём, из чего состоит этот паспорт, какие поля действительно важны, чем веб-манифест отличается от манифеста мобильного приложения и как проверить, что всё настроено правильно.
- Зачем нужен манифест
- Где используется манифест
- Веб-манифест (manifest.json)
- Манифест Android-приложения
- Манифесты в других экосистемах
- Из чего состоит веб-манифест
- Какие поля критичны, а какие второстепенны
- Как подключить манифест к сайту
- Связь манифеста с сервис-воркером и установкой
- Особенности на iOS
- Как проверить, что манифест работает
- Типичные ошибки при работе с манифестом
- Практические рекомендации
- Что важно понять в итоге
Зачем нужен манифест
Когда пользователь открывает обычный сайт, браузер сам решает, как его отобразить: во вкладке, с адресной строкой, со стандартным оформлением. Это нормально для контентных ресурсов, но неудобно для приложений — калькуляторов, редакторов, мессенджеров, интернет-магазинов, которые хочется запускать одним касанием и видеть в отдельном окне без элементов браузера.
Манифест решает эту задачу декларативно. Разработчик один раз описывает свойства приложения в машиночитаемом формате, а платформа (браузер, операционная система, магазин приложений) использует эти данные:
- формирует ярлык на домашнем экране или в меню приложений с нужным названием и иконкой;
- определяет, открывать ли приложение в отдельном окне без адресной строки;
- задаёт цветовую тему интерфейса и цвет фона при запуске;
- сообщает магазину приложений или каталогу PWA базовые сведения о продукте;
- помогает системе выбрать правильную ориентацию экрана и поведение при разных условиях.
Важно понимать: манифест сам по себе ничего не «делает». Он только описывает приложение. Всю логику выполняет код, а манифест обеспечивает корректную упаковку и представление этого кода для платформы.
Где используется манифест
Термин встречается в нескольких контекстах, и их полезно различать, чтобы не путать инструменты.
Веб-манифест (manifest.json)
Файл в формате JSON, который размещают на сервере рядом со страницами сайта и подключают через тег link в HTML. Это часть набора технологий прогрессивных веб-приложений (PWA). Именно веб-манифест позволяет установить сайт как приложение на Android, в настольных браузерах и частично на iOS.
Манифест Android-приложения
В нативной разработке под Android существует свой файл манифеста (AndroidManifest.xml). Он описывает компоненты приложения — экраны, службы, приёмники событий, — а также запрашиваемые разрешения, например доступ к камере или геолокации. Логика та же: единый описательный файл, который система читает до запуска кода.
Манифесты в других экосистемах
Похожие по смыслу файлы есть и в других средах: описание расширений браузера, конфигурации десктоп-приложений, метаданные пакетов в менеджерах зависимостей. Общий принцип везде одинаков — декларативное описание свойств программы для платформы.
Дальше в статье основное внимание уделено веб-манифесту, поскольку именно с ним чаще всего сталкиваются разработчики сайтов и веб-приложений.
Из чего состоит веб-манифест
Веб-манифест — это обычный JSON-объект. Минимальный рабочий пример выглядит так:
- name — полное название приложения, которое показывается, например, в диалоге установки;
- short_name — короткое имя для ярлыка, где место ограничено;
- icons — массив иконок разных размеров; обязательно указывать размер и тип файла;
- start_url — страница, с которой приложение открывается после запуска;
- display — режим отображения: отдельное окно, полноэкранный режим, минимальный интерфейс или обычная вкладка;
- theme_color — цвет интерфейса, который подхватывают элементы системы;
- background_color — цвет фона стартового экрана до загрузки интерфейса;
- lang и dir — язык и направление текста;
- scope — область сайта, которая считается частью приложения.
Существуют и дополнительные поля: категории, скриншоты, описание, предпочтительная ориентация, ссылки на связанные нативные приложения. Их набор зависит от платформы и версии спецификации, поэтому перед использованием конкретного поля стоит свериться с актуальной документацией браузеров.
Какие поля критичны, а какие второстепенны
Не все поля одинаково влияют на результат. Если приоритизировать работу, картина примерно такая.
| Поле | Роль | Что будет без него |
|---|---|---|
| name, short_name | Название приложения и ярлыка | Система подставит адрес страницы или обрежет длинное имя |
| icons | Иконки для ярлыка и splash-экрана | Установка может стать недоступной, ярлык — стандартным значком |
| start_url | Точка входа при запуске | Приложение откроется с непредсказуемой страницы |
| display | Режим окна | Приложение откроется как обычная вкладка с адресной строкой |
| theme_color, background_color | Оформление интерфейса и запуска | Система применит цвета по умолчанию, возможен белый вспыхивающий экран |
| scope | Границы приложения | Переходы за пределы области будут выглядеть как уход на другой сайт |
Отдельно про иконки: разные платформы требуют разные размеры и форматы. Практичный подход — подготовить набор из нескольких PNG-файлов покрывающих типовые размеры, включая крупную иконку 512×512, и явно прописать размеры в манифесте. Отсутствие подходящей иконки — одна из самых частых причин, почему браузер отказывается предлагать установку.
Как подключить манифест к сайту
Подключение занимает несколько шагов, но каждый из них важен.
- Создайте JSON-файл с описанием приложения и сохраните его, например, как manifest.json в корне сайта.
- Добавьте в HTML каждой страницы тег link с атрибутом rel=»manifest» и ссылкой на файл. Проще всего сделать это в общем шаблоне, чтобы файл подключался автоматически на всех страницах.
- Проверьте, что иконки физически доступны по указанным путям и соответствуют заявленным размерам.
- Убедитесь, что файл отдаётся сервером с корректным типом содержимого (обычно application/manifest.json) и доступен по HTTPS — большинство функций установки работают только на защищённом соединении.
- Откройте сайт в браузере и проверьте через инструменты разработчика, что манифест распознан и ошибок в нём нет.
Распространённая ошибка — подключить манифест только на главной странице. Тогда установка может работать непредсказуемо: пользователь, попавший на внутреннюю страницу из поиска, не увидит предложение добавить приложение.
Связь манифеста с сервис-воркером и установкой
Манифест часто упоминают вместе с service worker — скриптом, который работает в фоне и обеспечивает офлайн-доступ и кэширование. Эти технологии дополняют друг друга, но решают разные задачи:
- манифест отвечает на вопрос «что это за приложение и как его показать»;
- сервис-воркер отвечает на вопрос «как приложение работает без сети и управляет запросами».
Для полноценной установки PWA большинство браузеров требует и корректный манифест, и зарегистрированный сервис-воркер с обработкой офлайн-сценария. Если манифест в порядке, а воркера нет, браузер может ограничиться функцией «Добавить на главный экран» как закладкой, без полноценного режима приложения. Точные требования различаются между браузерами и их версиями, поэтому конкретный чек-лист стоит проверять в актуальной документации целевой платформы.
Особенности на iOS
iOS исторически поддерживает веб-манифест ограниченно. Часть данных — иконку, название, цвет строки состояния — Safari традиционно берёт из специальных мета-тегов HTML, а не из manifest.json. На практике это означает, что для корректного вида установленного веб-приложения на устройствах Apple часто приходится дублировать настройки: и в манифесте, и в мета-тегах страницы. Набор поддерживаемых возможностей меняется от версии к версии iOS, поэтому перед релизом стоит протестировать установку на реальном устройстве.
Как проверить, что манифест работает
Проверку можно выполнить без специальных инструментов, пройдя несколько контрольных точек:
- Откройте файл манифеста напрямую в браузере по его адресу — он должен отдаваться без ошибок сервера.
- В инструментах разработчика найдите раздел, посвящённый манифесту или PWA: там отображаются распознанные поля и предупреждения о проблемах.
- Попробуйте установить приложение через меню браузера и посмотрите на результат: название, иконку, наличие собственного окна.
- Запустите установленное приложение и проверьте start_url, цвет фона при старте и поведение навигации внутри scope.
- Проверьте консоль на сообщения об ошибках: невалидный JSON, битые пути к иконкам и неправильные MIME-типы проявляются именно там.
Если какое-то поле не применилось, сначала проверьте синтаксис JSON: лишняя запятая или незакрытая кавычка делают весь файл недействительным, хотя внешне он выглядит нормально.
Типичные ошибки при работе с манифестом
- Невалидный JSON. Файл написан вручную, в нём пропущена запятая или использован комментарий — браузер молча игнорирует весь манифест.
- Иконки без указания размеров. Система не может выбрать подходящий файл, и установка блокируется или выглядит некрасиво.
- Подключение не на всех страницах. Предложение установки появляется только на части сайта.
- Работа без HTTPS. Установочные функции требуют защищённого соединения, и локальные тесты по HTTP дают ложное ощущение поломки.
- Несовпадение scope и start_url. Приложение открывается, но переходы выбрасывают пользователя обратно в браузер.
- Игнорирование iOS. Разработчик проверяет только Android-устройство и не замечает, что на iPhone приложение выглядит как обычная ссылка.
Практические рекомендации
Если вы добавляете манифест к существующему сайту, разумный порядок такой:
- Определите, какие страницы входят в приложение, и задайте scope соответственно.
- Подготовьте набор иконок заранее, включая крупный размер, и пропишите их с явными размерами.
- Выберите display standalone, если хотите поведение обычного приложения, и проверьте, что интерфейс сайта не рассчитывает на видимость адресной строки.
- Настройте theme_color и background_color под фирменные цвета, чтобы избежать белой вспышки при запуске.
- Добавьте сервис-воркер, если нужна работа офлайн и полноценная установка как PWA.
- Протестируйте установку минимум на двух платформах, включая iOS, если ваша аудитория ею пользуется.
Что важно понять в итоге
Манифест приложения — небольшой декларативный файл, от которого зависит, воспримут ли ваш сайт как приложение. Ключевые условия успеха: валидный JSON, полный набор иконок с указанными размерами, корректные name, short_name, start_url и display, подключение на всех страницах и работа по HTTPS. Для полноценного PWA к этому добавляется сервис-воркер с офлайн-поддержкой.
Следующий шаг прост: откройте инструменты разработчика на своём сайте, посмотрите, подключён ли манифест и какие предупреждения выдаёт браузер, — это сразу покажет, с чего начинать доработку.
