Руководство по web app manifest: настоящий manifest.json, поле за полем
Web app manifest — это небольшой JSON-файл, который сообщает ОС, как установить ваш сайт: его имя, его иконки и его цвета. Вот настоящий пример, поле за полем.
Для чего нужен манифест
Манифест — это то, что превращает сайт в нечто, что ОС может установить. Когда пользователь добавляет ваш сайт на домашний экран, браузер читает манифест, чтобы решить, какая будет иконка, имя под ней, экран-заставка и открывается ли приложение с интерфейсом браузера или без него.
Это чистый JSON. Вам нужен один файл, связанный со всех страниц, плюс PNG-иконки, на которые он указывает. Каждое поле ниже соответствует тому, что видит пользователь.
Поля, которые важны
| Поле | Что оно контролирует |
|---|---|
| name | Полное имя приложения, отображаемое в запросе на установку и на экране-заставке |
| short_name | Имя под иконкой домашнего экрана, где места мало |
| icons | Набор иконок. Включите PNG 192 и 512, плюс один помеченный maskable для форм Android |
| theme_color | Цвет интерфейса ОС вокруг приложения, например строки состояния |
| background_color | Фон экрана-заставки, отображаемый, пока приложение загружается |
| display | Как открывается приложение. standalone скрывает интерфейс браузера, чтобы выглядеть нативно |
| start_url | Страница, которую открывает приложение при запуске с домашнего экрана |
Полный manifest.json
{
"name": "Acme Dashboard",
"short_name": "Acme",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#0b0b0f",
"background_color": "#0b0b0f",
"display": "standalone",
"start_url": "/"
}Две стандартные иконки и одна maskable, чтобы Android мог обрезать под любую форму лаунчера, не срезая ваш логотип.
Свяжите его со своими страницами
<link rel="manifest" href="/manifest.json">Поместите это в <head> каждой страницы. Без тега <link> файл существует, но ничто его не читает.
Частые вопросы
Что такое web app manifest?
Небольшой JSON-файл, который сообщает браузеру и ОС, как установить ваш сайт: его имя, иконки, цвета и как он должен открываться. Именно он делает страницу устанавливаемой на домашний экран.
В чём разница между theme_color и background_color?
theme_color окрашивает интерфейс ОС вокруг приложения, например строку состояния. background_color заполняет экран-заставку, отображаемый, пока приложение загружается. Часто они имеют одно и то же значение, но управляют разными поверхностями.
Куда поместить manifest.json?
Отдавайте его со стабильного пути, например с корня вашего сайта, затем ссылайтесь на него через <link rel="manifest" href="/manifest.json">. Иконки, которые он перечисляет, должны разрешаться по путям в полях src.
Нужен ли манифест для обычного сайта?
Только если вам нужны запросы на установку и иконки домашнего экрана. Простой информационный сайт прекрасно работает без него, но любой сайт, который пользователи могут сохранить на телефон, выигрывает от него.