Поддержка адаптивных иконок в PWA благодаря маскируемым иконкам
Новый формат для использования адаптивных иконок на платформах, где есть их поддержка.
Что такое маскируемые иконки? #
Установив прогрессивное веб-приложение на свежую модель Android, вы сможете заметить, что его иконка отображается на белом фоне. В Android Oreo были представлены адаптивные иконки приложений, принимающие различные формы на разных моделях устройств. Иконки, не соответствующие этому новому формату, имеют белый фон.
Маскируемые иконки — это новый формат, который обеспечивает большую степень контроля, позволяя вашему прогрессивному веб-приложению использовать адаптивные иконки. Добавленная маскируемая иконка сможет заполнить форму целиком, благодаря чему ваше приложение будет замечательно смотреться на любых Android-устройствах. Firefox и Chrome недавно добавили поддержку этого нового формата, и вы можете использовать его в своих приложениях.
Подходят ли мои нынешние иконки? #
Поскольку маскируемые иконки рассчитаны на поддержку различных форм, вам нужно предоставить непрозрачное изображение с некоторым отступом, которое браузер сможет позже обрезать до нужной формы и размера. Лучше не полагаться на какую-то конкретную форму, поскольку окончательный вариант может различаться в зависимости от браузера и платформы.
К счастью, существует четко определенная и стандартизированная «минимальная безопасная зона», соблюдаемая всеми платформами. Важные части вашей иконки, такие как логотип, должны находиться в пределах окружности в центре иконки с радиусом, равным 40% ее ширины. 10% внешнего края можно обрезать.
Вы можете проверить, какие части ваших иконок попадают в безопасную зону, с помощью Chrome DevTools. Открыв прогрессивное веб-приложение, запустите DevTools и перейдите на панель «Приложение». В разделе «Иконки» вы можете выбрать «Показывать только минимальную безопасную область для маскируемых иконок». Ваши иконки будут обрезаны так, чтобы была видна только безопасная область. Если ваш логотип виден в этой безопасной зоне, все готово.
Чтобы протестировать маскируемую иконку на различными формах Android, используйте созданный мной инструмент Maskable.app. Откройте иконку, затем Maskable.app позволит вам опробовать различные формы и размеры, и вы сможете поделиться предварительным просмотром с другими членами своей команды.
Как начать пользоваться маскируемыми иконками? #
Если вы хотите создать маскируемую иконку на основе существующей иконки, вы можете использовать редактор Maskable.app. Загрузите свою иконку, настройте цвет и размер, затем экспортируйте изображение.
После того, как вы создали маскируемое изображение иконки и протестировали его в DevTools, необходимо обновить манифест веб-приложения, чтобы он указывал на новые ресурсы. Манифест веб-приложения предоставляет информацию о вашем веб-приложении в файле JSON и включает массив icons.
С включением маскируемых иконок было добавлено новое значение свойства для ресурсов изображений, перечисленных в манифесте веб-приложения. Поле purpose сообщает браузеру, как следует использовать вашу иконку. По умолчанию для иконок значение этого поля равно "any". На Android такие иконки будут подогнаны под нужный размер и размещены поверх белого фона.
Маскируемые значки должны использовать другое назначение: "maskable". Это значение указывает, что изображение предназначено для использования с масками иконок, что позволяет вам регулировать результат. Таким образом, у ваших иконок не будет белого фона. Вы также можете указать несколько назначений, разделенных пробелами (например, "any maskable"), если хотите, чтобы маскируемая иконка использовалась без маски на других устройствах.
{
…
"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" // <-- Новое значение свойства `"maskable"`
},
…
],
…
}Теперь вы можете приступить к делу и создать собственные маскируемые иконки, обеспечив своему приложению отличный вид по всем краям (и если уж на то пошло, по всей окружности или по всему овалу 😄).
Благодарности #
Статью рецензировал Джо Медли.