4.4: Манифест приложения и управление иконками

Кто помнит прошлые дни интернета? Когда вы разместили свой логотип в левом верхнем углу сайта и на этом, в основном, работа была сделана? Invision Community имеет в своём арсенале изображения для социальных сетей, favicon и многое другое.

В Invision Community 4.4 кроме всего добавлены иконки мобильных приложений, иконок для Safari и данные для манифеста приложения. 

Перемещение текущих параметров

Первым шагом улучшения обработки этих изображений заключался в том, чтобы переместить текущие параметры из настроек темы в одну единую область в админцентре. Вы по-прежнему можете загружать изображение логотипа для каждой темы, но остальные параметры теперь перемещены в новую область админцентра: Кастомизация > Внешний вид > Иконки и логотипы.

Добавление новых параметров

После перемещения загрузки favicon и изображений для социальных сетей в собственную область админцентра, была рассмотрена возможность улучшения параметров конфигурации без необходимости редактирования шаблонов тем.

Несколько логотипов для социальных сетей

Теперь вы можете загрузить несколько изображений логотипа для социальных сетей. Если вы решите загрузить несколько логотипов, Facebook, Вконтакте и другие социальные сети, как правило, покажут карусель изображений, чтобы вы могли выбрать, какой логотип использовать при публикации контента, или просто используют первое из загруженных.

Иконки приложения

Теперь вы можете загрузить изображение, представляющее ваш сайт, которое будет автоматически использоваться для размещения на домашнем экране смартфонов на Android и iOS. Загрузка одного изображения приведёт к созданию нескольких его копий (различных размеров), тем самым мобильные устройства автоматически выбирают наилучший вариант из списка по мере необходимости.

Safari mask иконка

Вы также можете загрузить иконку Safari Mask, которая будет использована для представления вашего сайта в некоторых областях компьютеров Apple (например в тачбарах). Изображение должно быть в формате SVG с прозрачным фоном, и все векторы должны быть 100% черными. Кроме того, вы можете указать цвет маски.

Манифест приложения

Чтобы все устройства поддерживали иконки приложений, которые вы загружаете, должен быть создан и доступен для браузера файл веб-манифест. Он создаётся автоматически на основе данных и иконок, указанных вами в админцентре. Однако некоторые детали могут быть сконфигурированы явно на странице Иконки и логотипы:

Короткое название
Это короткое название для предоставления вашего сайта в областях с небольшим пространством экрана, например под иконкой вашего сайта на домашнем экране смартфона.

Название сайта
Это название вашего сайта. Данная настройка используется автоматически, если вы явно не переопределите её при конфигурировании манифеста.

Описание
Краткое описание вашего сайта

Цвет темы
Вы можете выбрать (один) цвет для предоставления основного цвета вашего сайта. Данный цвет может использоваться устройствами в таких областях, как фон адресной строки.

Цвет фона
Вы также можете выбрать один цвет для использования в качестве цвета фона для своего сайта, когда приложение запускается с помощью ярлыка, сохраненного на главном экране устройства пользователя.

Режим отображения
Наконец, вы можете указать режим отображения, на котором должен запускаться ваш сайт.

Создание файла манифеста закладывает основу для разработки и поддержки PWA (Progressive Web App - Прогрессивные веб-приложения). Кроме того, некоторые устройства Android будут автоматически предлагать пользователям добавлять ваш сайт на свой домашний экран.

Кроме того, для полноты Invision Community 4.4 создает специальный файл browserconfig.xml, который необходим для продуктов Microsoft (включая Microsoft Edge, Internet Explorer, X-Box, и мобильные устройства на ОС Microsoft) при закреплении сайтов и создании живых заголовков. Дополнительных параметров конфигурации для этого файла нет - все генерируется автоматически из вышеупомянутых параметров.

Каков итог?

Теперь ваше сообщество может лучше передать (автоматически) некоторые детали большинству устройств, которые получают доступ к вашему сайту.