Веб-манифест приложения (manifest.json)
Веб-манифест приложения — это JSON-файл (обычно manifest.json или site.webmanifest), подключаемый из <head> страницы, который говорит браузерам, как ваш сайт должен вести себя при установке на домашний экран или в лаунчер. Он поставляет имя приложения, набор иконок, цвета темы и фона и режим отображения. Без него браузер не предложит установить сайт как PWA.
Что объявляет манифест
Манифест — это небольшой JSON-документ, подключаемый через <link rel="manifest">. Когда пользователь устанавливает сайт, браузер читает его, чтобы назвать приложение, выбрать иконку, окрасить экран загрузки и решить, сколько интерфейса браузера показывать.
Он важен только для устанавливаемости и поведения на домашнем экране. Обычной вкладке браузера он никогда не нужен (это покрывают теги <link> с favicon), поэтому у множества сайтов манифеста вообще нет.
Минимальный манифест
{
"name": "My App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#111111",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}Ключевые поля
| Поле | Назначение |
|---|---|
| name / short_name | Полное и короткое (для домашнего экрана) названия |
| icons | Набор иконок для установки и домашнего экрана |
| display | Сколько интерфейса браузера показывает установленное приложение |
| theme_color | Окрашивает интерфейс ОС вокруг приложения |
| background_color | Цвет экрана загрузки при запуске |
| start_url | Страница, которую открывает установленное приложение |
Частые вопросы о веб-манифесте приложения
Нужен ли мне веб-манифест приложения?
Только если вы хотите, чтобы сайт устанавливался как PWA или чтобы вы управляли его видом на домашнем экране. Обычному сайту с одним favicon он не требуется.
В чём разница между manifest.json и site.webmanifest?
Ни в чём, кроме имени файла. Оба — один и тот же веб-манифест приложения; браузер использует тот файл, на который указывает ваш <link rel="manifest">.
Где подключать манифест?
В <head> страницы, через <link rel="manifest" href="/site.webmanifest">. Одна ссылка на каждой странице, которая должна быть устанавливаемой.