Иконки PWA: сделайте приложение устанавливаемым
Запрос установки — не выбор дизайна, а чек-лист. Пропустите иконку 192 или 512, и браузер молча откажется предложить установку. Вот точный набор.
Запрос установки завязан на иконки
Браузер предлагает установить PWA только когда манифест удовлетворяет набору требований, и иконки — одно из них. Конкретно, массив icons должен включать как минимум PNG 192x192 и 512x512. Пропустите любой, и запрос никогда не сработает, без ошибки, которую заметил бы пользователь.
192 — это иконка лаунчера. 512 питает заставку и дисплеи высокой плотности. Оба должны быть настоящими PNG в этих точных размерах, а не одним изображением, растянутым через CSS.
Сделайте его устанавливаемым
- 1
Экспортируйте два обязательных PNG
Создайте icon-192.png в 192x192 и icon-512.png в 512x512. Это те два, которые проверяет запрос установки.
- 2
Добавьте maskable-версию
Экспортируйте 512x512 с вашим знаком, отцентрированным внутри безопасной зоны и с отступами вокруг, затем пометьте как purpose: maskable, чтобы Android мог обрезать его в круг, squircle или скруглённый квадрат.
- 3
Укажите их все в манифесте
Поместите каждую иконку в массив icons манифеста с её src, sizes, type и purpose. См. код ниже для точного формата.
- 4
Подключите манифест и apple-touch-icon
Добавьте <link rel="manifest" href="/manifest.json"> и отдельный <link rel="apple-touch-icon"> в ваш head. iOS читает второй, а не манифест.
- 5
Проверьте запрос
Откройте свой сайт в Chrome, убедитесь, что элемент управления установкой появляется, и подтвердите, что у манифеста нет ошибок в панели application инструментов разработчика браузера.
Массив icons манифеста
{
"name": "Your App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1a1a1a",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}192 и 512 с purpose any удовлетворяют требованию установки. Запись maskable позволяет Android обрезать иконку без обрезания вашего знака.
Почему maskable отдельно
Лаунчеры Android обрезают иконки под любую форму, которую использует тема устройства. Обычная иконка, заполняющая весь квадрат, получает обрезанные углы. У maskable-иконки ваш знак отцентрирован в безопасной зоне с отступами, так что лаунчер может обрезать края, не задевая важную часть.
Вы всё равно держите иконку purpose any рядом с maskable. Поверхности, которые не обрезают (вкладка, переключатель задач), используют версию any, чтобы она не осталась с лишними отступами.
Часто задаваемые вопросы
Почему не показывается запрос установки моего PWA?
Самая частая причина, связанная с иконками, — отсутствие PNG 192x192 или 512x512 в массиве icons манифеста. Оба обязательны. Также проверьте, что манифест подключён и отдаётся, а приложение работает по HTTPS с service worker.
Какие размеры иконок нужны PWA?
PNG 192x192 и 512x512 в манифесте обязательны для запроса установки. Добавьте maskable-версию 512x512 для Android и apple-touch-icon 180x180 для iOS.
Нужна ли мне maskable-иконка?
Для Android — да. Без неё лаунчер обрезает вашу иконку во весь кадр и срезает углы. Maskable-иконка держит ваш знак внутри безопасной зоны, чтобы он пережил любую форму.
Задаёт ли манифест иконку домашнего экрана iOS?
Нет. iOS игнорирует icons манифеста в «Добавить на домашний экран». Он использует тег <link> apple-touch-icon, так что вам нужен он в вашем head, даже если манифест полон.