Invision byte

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

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

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

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

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

EditingDefault-GoogleChrome2018-10-1010_01_17.png

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

После перемещения загрузки 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) при закреплении сайтов и создании живых заголовков. Дополнительных параметров конфигурации для этого файла нет - все генерируется автоматически из вышеупомянутых параметров.

666585335_IconsLogos-GoogleChrome2018-10-1010_39_53.png

2022094232_iconsandlogos2.png

1873928168_iconsandlogos3.png

Каков итог?

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

Оцените новость: 
Подписчики 0

Обратная связь


Комментариев нет



Присоединяйтесь к обсуждению

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

Гость
Добавить комментарий...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...

×
×
  • Создать...