Структура manifest.json

Урок разбирает веб-манифест по полям и показывает минимальный рабочий manifest.json.

Веб-манифест — это JSON-файл, который описывает приложение: его имя, иконки, цвета и то, как оно должно выглядеть после установки.

Зачем нужен манифест

Когда пользователь устанавливает PWA, браузеру нужно знать: как назвать иконку, какую картинку поставить, в каком окне открывать приложение, какого цвета сделать системную панель. Все эти данные берутся из манифеста. Без него браузер не предложит установку — это один из обязательных критериев PWA.

Минимальный манифест

{
  "name": "Моя заметка",
  "short_name": "Заметка",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3367D6",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Разбор ключевых полей

Поле	Назначение
`name`	Полное имя приложения (на экране установки, splash-экране)
`short_name`	Короткое имя под иконкой на домашнем экране
`start_url`	С какой страницы открывается приложение при запуске
`display`	Режим отображения: `standalone`, `fullscreen`, `minimal-ui`, `browser`
`theme_color`	Цвет системной панели и UI вокруг приложения
`background_color`	Цвет splash-экрана до загрузки приложения
`icons`	Массив иконок разных размеров

Поле display

Самое заметное для пользователя поле — display. Оно решает, будет ли видна адресная строка браузера:

standalone — приложение в отдельном окне, без адресной строки. Самый частый выбор для PWA.
fullscreen — на весь экран, даже без системных панелей (для игр).
minimal-ui — минимальный набор кнопок навигации.
browser — открывается как обычная вкладка браузера (по сути отключает «приложенческий» вид).

Как работает под капотом start_url

Когда пользователь нажимает на иконку установленного PWA, браузер открывает именно start_url. Часто туда добавляют метку источника, например /?source=pwa, чтобы в аналитике отличать запуски из установленного приложения от обычных заходов на сайт. Если start_url указать неправильно (например, на несуществующую страницу), приложение при запуске покажет ошибку.

Частые ошибки

Невалидный JSON. Лишняя запятая или комментарий — и манифест не распарсится, установка не предложится.
Нет иконок 192 и 512. Браузеры обычно требуют именно эти размеры для устанавливаемости.
display: browser. С этим значением приложение откроется как обычная вкладка — не то, что ждут от PWA.
Относительные пути к иконкам с ошибкой. Если путь не находит файл — иконки не будет, и установка может не сработать.

Итоги

Манифест — JSON с именем, иконками, цветами и режимом отображения.
Обязательные поля для установки: name/short_name, start_url, display, icons (192 и 512).
display: standalone убирает адресную строку — это вид «настоящего приложения».
JSON должен быть валидным: без комментариев и хвостовых запятых.