Преимущества Manifest.json
Apple, Google и Microsoft продолжают делать ставку на Web App Manifest. Заполните его один раз, и ваши иконки, theme color и аналитика встанут на свои места повсюду.
Что даёт вам manifest
| Преимущество | Что вы получаете |
|---|---|
| Подсказки установки, выглядящие нативно | Chrome, Edge и Android показывают баннеры «Установить приложение» только если ваш manifest объявляет icons, name, start_url и режим display. |
| Splash-экраны, готовые к работе офлайн | Manifest даёт вам контроль над splash-изображениями, цветами фона и maskable-иконками, чтобы офлайн-запуск выглядел продуманным. |
| Согласованные метаданные повсюду | Когда поисковые системы или социальные платформы анализируют ваш manifest, они берут тот же заголовок, theme color и иконки, которые вы подобрали. |
Анатомия современного manifest
Это те поля, которые Lighthouse и Android реально проверяют, прежде чем показать вашу иконку.
| Поле | Зачем оно существует | Профессиональный совет |
|---|---|---|
| name & short_name | Управляет баннером установки и текстом подписи в лаунчере. | Держите short_name короче 12 символов, чтобы он не обрезался на домашних экранах Android. |
| icons[] | Определяет, какие PNG питают поверхности установки, splash-экраны и maskable-логотипы. | Включите размеры 192, 256, 384 и 512 с purpose: "any maskable" для наилучшего покрытия. |
| start_url | Определяет, какой маршрут открывается, когда пользователь запускает приложение из дока. | Добавьте ?source=pwa и читайте это значение на сервере, чтобы адаптировать аналитику. |
| display | Переключает между режимами standalone, fullscreen или minimal-ui. | Используйте standalone плюс theme_color, чтобы соответствовать оформлению вашего бренда. |
С чего начинаются иконки manifest
Стартовый JSON
{
"name": "Favicon Tools",
"short_name": "Favicons",
"start_url": "/?source=pwa",
"display": "standalone",
"scope": "/",
"background_color": "#0f172a",
"theme_color": "#312e81",
"icons": [
{ "src": "/android-icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/android-icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}Поместите этот файл в /public/manifest.json, и генератор внутри Favicon Tools будет поддерживать массив иконок в актуальном состоянии всякий раз, когда вы экспортируете новый набор.
Чек-лист релиза
Держите это приклеенным к вашей панели деплоя, чтобы manifest оставался точным после ребрендингов.
- 1
Отдавайте и подключайте manifest
Отдавайте manifest по адресу /manifest.json и подключайте его через <link rel="manifest" href="/manifest.json">.
- 2
Проверьте, что каждая иконка разрешается
Убедитесь, что каждая упомянутая иконка действительно существует в вашей CDN и соответствует заявленному размеру.
- 3
Согласуйте оформление браузера
Добавьте мета-теги theme-color и background_color, чтобы согласовать оформление браузера с палитрой вашей иконки.
- 4
Прогоните lint и аудит перед релизом
Запускайте npx next lint плюс PWA-аудит Lighthouse перед каждым релизом, чтобы отловить отсутствующие поля manifest.
- 5
Задайте область установленного приложения
Укажите scope в manifest на основной URL вашего приложения, чтобы устанавливаемые ярлыки оставались в пределах вашего домена.
Автоматизируйте обновления
Храните шаблон вашего manifest рядом с конфигурацией иконок. Когда CI собирает новый набор favicon, обновляйте JSON и делайте redeploy вместе с ним.
Тестируйте как нативное приложение
Установите ваш сайт на iOS, Android и десктопный Chrome. Проверьте, что splash-экран, маска иконки и theme color соответствуют значениям manifest.
QA-командам нравится простой чек-лист: установить, запустить офлайн, проверить качество иконки, проверить параметр аналитики.