Иконки приложений, которые адаптируются к платформам.
Что такое маскируемые значки?
Если вы установили Progressive Web App на свой последний телефон Android, вы можете заметить, что значок отображается на белом фоне. В Android Oreo представлены адаптивные значки, которые отображают значки приложений различной формы на разных моделях устройств. Значки, не соответствующие этому новому формату, имеют белый фон.
Маскируемые значки — это новый формат значков, который дает вам больше контроля и позволяет вашему прогрессивному веб-приложению использовать адаптивные значки. Если вы предоставите маскируемый значок, он сможет заполнить всю фигуру и отлично выглядеть на всех устройствах Android. Firefox и Chrome недавно добавили поддержку этого нового формата, и вы можете использовать его в своих приложениях.
Готовы ли мои текущие значки?
Поскольку маскируемые значки должны поддерживать различные формы, вы предоставляете непрозрачное изображение с некоторыми отступами, которые браузер может обрезать до необходимой формы и размера. Лучше не полагаться на какую-либо конкретную форму, поскольку окончательная форма зависит от браузера и платформы.
К счастью, существует четко определенная и стандартизированная «минимальная безопасная зона», которую соблюдают все платформы. Важные части вашего значка, такие как логотип, должны находиться в круглой области в центре значка с радиусом, равным 40 % ширины значка. Внешний край 10% может быть обрезан.
Вы можете проверить, какие части ваших значков попадают в безопасную зону с помощью Chrome DevTools. Открыв прогрессивное веб-приложение, запустите DevTools и перейдите на панель приложений . В разделе «Значки» вы можете выбрать « Показывать только минимальную безопасную область для маскируемых значков» . Ваши значки будут обрезаны так, что будет видна только безопасная область. Если ваш логотип виден в этой безопасной зоне, все готово.
Чтобы протестировать маскируемый значок с различными фигурами Android, воспользуйтесь инструментом Maskable.app , созданным Tiger. Откройте значок, затем Maskable.app позволит вам попробовать различные формы и размеры, и вы сможете поделиться предварительным просмотром с другими членами вашей команды.
Как мне использовать маскируемые значки?
Если вы хотите создать маскируемый значок на основе существующего значка, вы можете использовать редактор Maskable.app Editor . Загрузите свой значок, настройте цвет и размер, а затем экспортируйте изображение.
После того как вы создали маскируемый значок и протестировали его в DevTools, вам необходимо обновить манифест веб-приложения , чтобы он указывал на новый ресурс. Манифест веб-приложения предоставляет информацию о вашем веб-приложении в файле JSON и включает массив icons .
При включении маскируемых значков поле purpose сообщает браузеру, как следует использовать ваш значок. По умолчанию значки имеют назначение "any" . Размер этих значков будет изменен на белом фоне на Android.
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
Маскируемые значки должны использовать другое purpose : "maskable" . Это означает, что изображение предназначено для использования с масками значков, что дает вам больше контроля над результатом. Таким образом, ваши значки не будут иметь белый фон. Вы также можете указать несколько целей, разделенных пробелами (например, "any maskable" ), если вы хотите, чтобы ваш маскируемый значок использовался без маски на других устройствах.
Благодаря этому вы можете пойти дальше и создавать свои собственные маскируемые значки, следя за тем, чтобы ваше приложение выглядело великолепно от края до края (и того, чего оно стоит, от круга к кругу, от овала к овалу 😄).
Благодарности
Эта статья была рассмотрена Джо Медли .