Адаптивные значки на Android 9 с манифестом веб-приложения
Я настраиваю манифест веб-приложения для моего PWA. Но иконки для Android сжимаются в круглую иконку.
Я попробовал нормальную иконку, без фона и с учетом безопасной зоны.
Изображения иконок, установленных на моем Android
К сожалению, я не нахожу никакой документации для этого, и значок действительно беспокоит меня.
Отредактировано:
"name": "PWA-Test",
"short_name": "PWA-Test",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "/assets/android-chrome-36x36.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "/assets/android-chrome-48x48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "/assets/android-chrome-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/assets/android-chrome-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/assets/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/assets/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/assets/android-chrome-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/assets/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#5c3552",
"background_color": "#5c3552"
Редактировать 2: Кажется, работает, когда я просто использую круглый значок. Но пользовательский интерфейс отличается на каждой версии Android, я думаю.
Решил это, сделав круглую иконку. Теперь проблема в том, что значок на рабочем столе теперь тоже круглый.
1 ответ
Во-первых, вам нужно создать иконку с двумя слоями.
Вы можете использовать эту утилиту: https://maskable.app/editor
После этого вам нужно установить маскируемую цель в вашем manifest.json
{
…
"icons": [
…
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any maskable" // <-- New property value `"maskable"`
}
]
…
}
подробнее в этой статье: https://web.dev/maskable-icon/
Я использую свои PWA на устройствах Android, и мне не нужно было вносить какие-либо специальные изменения в значки.
Вот часть моего веб-манифеста:
"icons": [
// Other sizes
{
"src": "/images/icons-144.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
]
В случае Chrome ему нужны как минимум два размера иконок: 192x192 и 512x512:
Включите значок 192x192 пикселей и значок 512x512 пикселей. Chrome автоматически масштабирует значок устройства. Если вы предпочитаете масштабировать свои собственные значки и настраивать их на пиксельное совершенство, предоставьте значки с шагом 48 точек на дюйм.
В WebAPK, созданных в Chrome 71 или более поздней версии, на заставке появится значок большего размера. Никаких действий не требуется, если указаны рекомендуемые значки.