Что такое manifest.json?
Простое руководство по веб-манифестам приложений и тому, как они оживляют прогрессивные веб-приложения.
Разбираемся в манифесте
Веб-манифест приложения, определённый в спецификации W3C Web Application Manifest, — это текстовый файл JSON, который предоставляет информацию о веб-приложении.
Самое распространённое применение веб-манифеста приложения — предоставить информацию, которая нужна браузеру для установки прогрессивного веб-приложения (PWA) на устройство, например имя и иконку приложения.
Веб-манифест приложения содержит один объект JSON, ключи верхнего уровня которого называются members.
Почему manifest.json важен
| Преимущество | Что оно даёт |
|---|---|
| Установка PWA | Манифест позволяет браузерам предлагать пользователям установить ваше веб-приложение на устройство, из-за чего оно ощущается как нативное приложение. |
| Ссылки на иконки | Манифест сообщает браузерам, какие файлы иконок использовать в разных контекстах: домашние экраны, заставки и лаунчеры приложений. |
| Метаданные приложения | Он предоставляет важную информацию, такую как имя приложения, цвета темы, режим отображения и стартовый URL, для единообразного опыта. |
Проблема с иконками
Создание полного manifest.json требует генерации и указания иконок нескольких размеров. Каждый размер служит конкретной цели на разных платформах и в разных контекстах.
Для чего каждый размер
| Размер | Назначение |
|---|---|
| 192x192 | Стандартные иконки домашнего экрана Android |
| 512x512 | Заставки высокого разрешения и Android |
| 96x96 | Ярлыки на рабочем столе и Google TV |
| 32x32 | Вкладки браузера и закладки |
| 16x16 | Адресная строка и поддержка устаревших браузеров |
Те же размеры, в реальном масштабе
Как помогает Favicon Tools
Вручную создавать все нужные размеры иконок и поддерживать файл manifest.json может быть долго и чревато ошибками. Favicon Tools автоматизирует этот процесс.
Когда вы используете Favicon Tools для генерации своих favicon, мы автоматически записываем полный manifest.json, который ссылается на все нужные вам размеры иконок:
Что покрывает сгенерированный манифест
| Группа иконок | Размеры | Что покрывает |
|---|---|---|
| Иконки Android | 192x192, 512x512 | Ярлыки домашнего экрана и заставки |
| Стандартные favicon | 16x16, 32x32, 96x96 | Вкладки браузера и закладки |
| Apple touch icons | Все необходимые размеры | Устройства iOS |
| Плитки Windows | Размеры плиток | Интеграция с меню «Пуск» Microsoft |
Пример manifest.json
{
"name": "Favicon Tools",
"short_name": "Favicons",
"start_url": "/",
"display": "standalone",
"scope": "/",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/favicon-32x32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "/favicon-16x16.png",
"sizes": "16x16",
"type": "image/png"
}
]
}Этот манифест включает все важные ссылки на иконки, необходимые для установки PWA и корректного отображения на разных платформах. Favicon Tools генерирует его автоматически вместе со всеми файлами иконок, на которые есть ссылки.
Генерация в один клик
Загрузите исходное изображение один раз, и Favicon Tools сгенерирует все нужные вам размеры иконок плюс полный файл manifest.json — всё в одном скачиваемом пакете.
Не нужно вручную изменять размер изображений, создавать несколько файлов или писать JSON руками. Всё готово к добавлению в ваш проект.
Всегда актуально
Когда вы пересоздаёте свои favicon после ребрендинга или обновления дизайна, manifest.json обновляется с правильными ссылками на иконки.
Это не даёт вашему манифесту рассинхронизироваться с реальными файлами иконок, что как раз и приводит к битым ссылкам и отсутствующим иконкам.