Если вы установили прогрессивное веб-приложение (PWA) на последний телефон Android, вы можете заметить, что значок приложения имеет белый фон. В Android 8.0 появились адаптивные значки, которые отображают значки приложений различной формы на разных моделях устройств. Значки, не использующие этот формат, имеют белый фон.
Маскируемые значки — это новый формат значков для Chrome и Firefox, который позволяет вашему прогрессивному веб-приложению использовать адаптивные значки и дает вам больше контроля над внешним видом значков.
Готовы ли мои текущие значки?
Поскольку маскируемые значки должны поддерживать различные формы, вам необходимо предоставить непрозрачное изображение с некоторыми отступами, которые браузер может обрезать до необходимой формы и размера для любого браузера или платформы.
Спецификация маскируемых значков включает стандартизированную «минимальную безопасную зону», которую соблюдают все платформы. Важные части вашего значка, такие как логотип, должны находиться в круглой области в центре значка с радиусом, равным 40 % ширины значка. На некоторых платформах внешний край в 10 % может быть обрезан.
Вы можете проверить, какие части ваших значков находятся в безопасной зоне, с помощью Chrome DevTools. Открыв прогрессивное веб-приложение, запустите DevTools и перейдите на панель приложений . В разделе «Значки» вы можете выбрать « Показывать только минимальную безопасную область для маскируемых значков» . Ваши значки будут обрезаны так, что будет видна только безопасная область. Если ваш логотип виден в этой безопасной области, значок готов.
Чтобы протестировать маскируемый значок с различными фигурами Android, используйте Maskable.app Тайгера Оукса. Откройте значок, и 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" ), если хотите, чтобы ваш маскируемый значок использовался без маски на других устройствах.
Благодарности
Эта страница была просмотрена Джо Медли .