Теперь, когда вышла iOS 16.4, я использовал функцию «Добавить на главный экран» (A2HS), чтобы добавить несколько форумов Discourse на главный экран своего iPhone, включая этот форум, Meta.
Когда я добавляю Meta на главный экран в iOS, это выглядит так:
Если присмотреться, то можно заметить, что это на самом деле прозрачное изображение с почти чёрной рамкой, окружённое чёрным фоном. Как только вы это увидите, вы уже не сможете этого не замечать.
Apple автоматически добавляет чёрный фон к этой иконке, создавая два разных оттенка чёрного на иконке.
Хуже того, когда вы нажимаете на иконку, а затем возвращаетесь на главный экран, iOS на мгновение показывает прозрачную иконку, а через секунду рисует чёрный фон.
(Жаль, что Apple не оставляет его прозрачным! Эта иконка выглядит довольно хорошо… хотя бы секунду.)
Я думаю, лучшее решение — заменить «apple touch icon» Meta на иконку без прозрачности. Я использовал пипетку в Photoshop, чтобы заполнить квадрат подходящим почти чёрным фоном, вот так:
Кроме того, я предлагаю, чтобы Discourse отображал значок «apple touch icon» в настройках на чёрном фоне, чтобы администраторам сайта было более очевидно, что произойдёт, если они попытаются использовать прозрачный значок в качестве «apple touch icon».
РЕДАКТИРОВАНИЕ: Было бы ещё лучше, если бы в настройках администратора значок «apple touch icon» отображался со скруглёнными углами и на чёрном фоне, чтобы администраторы сайта могли видеть, что изображение будет иметь скругление углов, предоставляемое Apple. На одном из других форумов, где я состою, был значок «apple touch icon» с цветной рамкой, и, разумеется, он выглядел ужасно, когда Apple добавила скруглённые углы…
Однако эта область вокруг цвета является частью логотипа. Не уверен, что чёрный на чёрном выглядит правильно. Тёмно-серый на чёрном смотрится лучше, чем альтернативный вариант. Эта область образует букву D в слове Discourse; без неё мы видим лишь перекрывающиеся речевые пузыри.
Логотип был изменён, потому что ранее использовавшийся прозрачный PNG-файл при добавлении на главный экран заменял прозрачность на чёрный цвет, что фактически закрывало часть логотипа.
Его заменили на иконку с явным белым фоном, чтобы логотип корректно отображался при добавлении на главный экран.
Действительно, я думал, что именно поэтому в Discourse есть два отдельных параметра: «иконка манифеста» и «иконка apple touch», поскольку Apple игнорирует прозрачность и применяет маску со скруглёнными углами, тогда как другие браузеры должны следовать стандарту Web Manifest, поддерживая прозрачность.
И Chrome (иконки вкладок на Android), и Firefox (страница новой вкладки) используют apple-touch-icon как версию favicon с высоким разрешением, и оба были затронуты этим изменением.
Насколько мне известно, этот файл используется только для функций PWA, например, для значка при добавлении на главный экран.
Я только что заметил, что иконка Android PWA этого форума тоже немного сломана.
Я только что запустил Android Studio, открыл эмулятор Pixel 4 с Android API 31, установил последнюю версию Google Chrome и добавил Meta на главный экран. Иконка выглядит так:
Как я понимаю, проблема в том, что в https://meta.discourse.org/manifest.webmanifest указан вариант с двумя иконками: одна для цели «any», а другая — для цели «maskable». Иконка «maskable» подразумевает, что с неё можно вырезать круг радиусом 40%.
К счастью, существует чётко определённая и стандартизированная «минимальная безопасная зона», которую поддерживают все платформы. Важные элементы вашей иконки, например логотип, должны находиться внутри круглой области в центре иконки радиусом 40% от ширины иконки. Внешние 10% по краям могут быть обрезаны.
Вы можете проверить, какие части ваших иконок попадают в безопасную зону, с помощью Chrome DevTools. Откройте Progressive Web App, запустите DevTools и перейдите на панель Application. В разделе Icons выберите опцию Show only the minimum safe area for maskable icons. Иконки будут обрезаны так, чтобы была видна только безопасная область. Если ваш логотип виден внутри этой зоны, всё в порядке.
Вот как выглядит панель Manifest для Meta в Chrome DevTools, когда я включаю «Show only the minimum safe area for maskable icons»:
Поскольку иконка должна быть maskable, Android/Chrome вырезает из неё круглую часть по центру, что приводит к плохому результату.
Я также протестировал иконку Apple Touch Icon, которую @Stephen описал как «тонущую в море белого», в качестве maskable-иконки в манифесте через Chrome DevTools. Но даже эта иконка оказывается чуть слишком большой для стандартного размера maskable-иконки: нижний левый угол обрезается.
Можете ли вы найти какую-либо документацию о том, какой иконку использует Firefox для страницы новой вкладки?
Если Firefox не использует иконку из манифеста для страницы новой вкладки, то я бы ожидал, что он хотя бы использует одну из иконок <link rel="icon">.
Возможно, Firefox возвращается к apple-touch-icon, потому что <link rel="icon"> слишком маленький?
Кстати, можно иметь несколько элементов <link rel="icon"> с разными атрибутами sizes. Думаю, было бы логично использовать два таких элемента: первый указывает на favicon, а второй — на иконку из манифеста с большим значением sizes. Скорее всего, это заставит Firefox использовать лучшую, более крупную иконку.
В более широком смысле, я думаю, мораль этой истории такова:
На самом деле это своего рода проект — разобраться, какие иконки используются где и почему.
Панель администратора Discourse не предоставляет администраторам почти достаточных рекомендаций, чтобы сделать всё правильно.
Панель администратора должна:
Запрещать прозрачность в иконках манифеста и apple-touch-icon.
Отображать иконку манифеста в виде круга с радиусом 40%, как это делает Chrome DevTools.
Отображать apple-touch-icon со скруглёнными краями, как это делает Apple.
С такими возможностями дизайнер мог бы начать пытаться решить проблему загрузки иконок, которые хорошо выглядят во всех следующих случаях:
iOS A2HS
Android A2HS
Страницы новых вкладок для Firefox, Chrome и Safari
