Думаю, многие знают о возможности добавления иконки сайта на рабочий стол мобильного устройства. Это удобно и причины могут быть разные (нету мобильного приложения, предоставляющего туже информацию, либо вы хотите сразу открыть определенную страницу сайта и т.д.). За некоторые свойства того, как будет отображаться сайт и как будет выглядеть иконка после добавления и отвечает файл манифеста.

Манифест для сайта – это простой JSON-файл, который позволяет вам настроить следующие вещи:
1. Какая будет иконка у пользователя, после того как он добавит ваш сайт на рабочий стол
2. Как будет запускаться ваш сайт (с адресной строкой, без нее или в полноэкранном режиме)
3. Splash screen
4. Цветовую тему
5. Ориентацию экрана
6. Начальный url
и многое другое

Подробнее

Чтобы показать, как manifest влияет на отображение сайта, я создал простое, тестовое веб-приложение, которые возвращает название региона по коду.

Сначала зафиксируем положение дел до добавления файла манифеста.

После того как пользователь добавил иконку, она будет выглядеть так (на Андроид 5.0)
Название браузер выдернул из тега tilte. Так что, если у вас нету файла манифеста, то хотя бы title должен быть нормальным. А вот иконка в виде буквы “G” появилась сама (не понятно, почему именно G).
А сам сайт будет выглядеть так

Тут, собственно, ничего особенного, кроме того, что мы можем убрать адресную строку, чтобы приложение было похоже на нативное.

Встречайте, manifest.json!

С примером манифеста можно ознакомиться по этой ссылке . Кратко пройдемся по параметрам:
name – имя, которое будет отображаться под иконкой, ну и вообще везде, где будет отображаться ваше «приложение»
short_name – будет использоваться в тех случаях, когда места для отображения полного имени недостаточно
icons – набор иконок разных размеров
start_url – определяет url, которые открывается при нажатии иконки (можно использовать, чтобы зафиксировать пользователей, которые открывают сайт через иконку на рабочем столе, добавив параметр, допустим, ?src=homescreen в url)
display – отвечает за то, как будет отображаться ваш сайт (с адресной строкой без нее и т.п.)
background_color – устанавливает цвет страницы до того как она загрузилась. Пока страница не загрузилась пользователь видит перед собой белое пустое поле. Чтобы как-то разукрасить его серые будни, можно изменить этот цвет. Например, поставить цвет фона сайта.

Генерируй и властвуй.

Конечно, можно написать весь манифест ручками, но это скучно, долго и можно ошибиться. Уже нашлось немало умельцев, которые автоматизировали этот процесс. Ниже небольшой обзор инструментов для автоматической генерации манифеста.

brucelawson.github.io/manifest - все что вам нужно – заполнить поля (есть краткое описание каждого параметра, так что процесс довольно легкий), остальное за вас сделает генератор.

www.favicon-generator.org - хоть прямое назначение этого сайта генерировать иконки, а не манифест. Он все же его создает и в отличии от предыдущего у вас уже будут и иконки (для iOS и Аднроид) и манифест. Правда, манифест придется подправить (изменить имя и прочее настройки).

manifest-validator.appspot.com - этот инструмент предназначен для валидации вашего манифеста.

Результат

Итак иконки нарисовали, манифест сделали. Дальше надо сообщить браузеру о манифесте, добавив в тег head следующие

Все. Смотрим, что получилось
Иконка:

Слева до. Справа после (иконка получилась невпечатлительная, с удовольствием поменяю, если пришлете лучше). Тут уже заметно, что Android использовал имя из поля short_name, так как name не помещается, видимо.

Загрузка приложения:

Тут самые приятные изменения. Во-первых, вместо белого экрана вы видите подобие splash screen, который сам создается системой из иконки, полного имени и цвета, указанного в манифесте (возможно, это происходит только на android 5.0 выше). Во-вторых, этот splash screen плавно исчезает, что визуально красиво.

Сам сайт:

Тут тоже все стало лаконично. Без UI браузера сайт смотрится гораздо лучше и больше похож на нативное приложение.

Я перечислил не все свойства, которые можно указать в файле манифеста. С полным списком можно ознакомиться

Материал устарел.

Что такое Табло в Яндекс брузере? Это та же экспресс-панель, какая бывает и в других браузерах. Собственно, вот вопрос: о чем эта статья и что я тут делаю?

По сути это мелочь, ну, а почему бы и нет?

Здесь я не буду рассказывать о том, как можно добавить в виджет нотификатор (например, количество непрочитанных сообщений), Вы просто сможете использовать свой логотип в табло Яндекс браузера.

Приступим

Добавьте следующий код на всех страницах сайта между и

200?"200px":""+(this.scrollHeight+5)+"px");">

manifest.json - URL виджета, отсюда браузер возьмет информацию для табло.

Создайте файл manifest.json со следующим содержимым:

200?"200px":""+(this.scrollHeight+5)+"px");">{
"version": "1",
"api_version": 1,
"layout":
{
"logo": "http://сайт/images/logo_rus.png",
"color": "#236999",
"show_title": false
}

Замените #236999 на свой цвет. Вы можете взять его из этого каталога безопасных цветов .

Подробная документация на странице API Табло .

Не получилось?

Если у Вас не получилось, ошибку можно выявить с помощью страницы chrome://tableau-widget/ . Там следует ввести ссылку на manifest.json на Вашем сайте.

Describing a Widget in HTML Code

Insert the following metatag in the section in the HTML code of each webpage:

Attribute description (both attributes are required):

name is the name of the meta tag yandex-tableau-widget .

content is the description of the logo and color of the widget, and notifiers in the following format: content="logo=logo.png, color=#ffffff, feed=feed.json"

• URLencoded .

Widget manifest

Restriction. The size of the manifest.json file must not exceed 100 KB.

Another way to configure a widget is to create a widget manifest file and place a link to it within the tag in the HTML code of each page.

where manifest.json is the path for downloading the widget manifest. It can be relative or absolute:

The absolute path is the full URL of the file. Example: http://sitename.tld/... /manifest.json .

The relative path is the path to the widget manifest relative to the page that the widget is configured for. Example: manifests/manifest.json .

The browser will download the manifest file once a day via the link you entered. If the browser is opened less frequently than once a day, the file will be downloaded every time the browser is restarted.

feed is an optional attribute that specifies the path to the feed.json file with the description of notifiers. The widget is displayed without notifiers if this attribute isn"t included. The path must be URLencoded .

Purpose and format of the feed.json file

Restriction. The size of the feed.json file should not exceed 50 KB.

The feed.json file contains the description of notifiers displayed in the widget and their current values. It is automatically downloaded from the server at a frequency set by the webmaster (by default, every 60 minutes). This allows the notifiers to update. If, during the download, the server returns an incorrect answer three times in a row, the notifier values will be reset to zero.

Restriction. The response to the request for feed.json at the address specified in the manifest must be of the type Content-Type: application / json .

Feed.json is a JSON file with the following structure:

{ "notifications": [ {"": }, //Description of the 1st notifier; the number is an integer or a floating point number (up to two decimal places). {"": }, //Description of the 2nd notifier. {"": }, //Description of the 3rd notifier. ], "refresh_time" : }

where the attribute icon name accepts one of these predefined values:

while the attribute number is the number of non-viewed messages of the selected type. When creating a file, we recommend entering 0 . The attribute value will be updated automatically in the future.

The color of icons is determined automatically; if the widget has a dark background, the notifier will have a light color, and vice versa.

Restriction. A widget can display no more than three notifiers. If the feed file specifies more than three notifiers, the widget will display the first three of them.

Example of the widget description with notifiers

feed.json file

{ "notifications": [ {"bell": 1}, {"friend": 2}, {"message": 1} ], "refresh_time" : 2 }

Values of notifiers to display on the site"s Tableau widget in Yandex Browser

Widget design requirements

You need to define the background color and logotype image for the website widget.

Tip. The background color should correspond to either the company"s signature color or the website"s main background color.

Logotype requirements

The logotype image should meet the following requirements:

Examples of good and poor logotypes

Examples of widget design

Site	youtube.com	yandex.com	bbc.com	twitter.com
Fill color	#3b5998	#ffffff	#000000	#00adec
Widget background
Logo
Result

Открывается Табло - панель с виджетами сайтов, которые вы чаще всего посещаете. По умолчанию на Табло установлены виджеты некоторых сервисов Яндекса.

Чтобы перейти на нужный сайт, нажмите на его виджет (на нем отображается логотип и, если виджет открывает не главную страницу сайта, название страницы).

Совет. Чтобы быстро открыть нужный виджет на Табло, используйте сочетания клавиш:

в Windows: нажмите Ctrl + T , а затем Alt + 1, 2... ,

в macOS: нажмите ⌘ + T , а затем Ctrl + 1, 2... ,

где 1, 2... - это номера виджетов на Табло (слева направо и сверху вниз).

Набор и последовательность виджетов на Табло можно настроить вручную .

Примечание. Чтобы изменить размер Табло, нажмите на любой виджет правой клавишей мыши и выберите команду Размер Табло → Нормальный или Размер Табло → Увеличенный . Если выбрать команду Размер Табло → Подстраивать под окно браузера , то при уменьшении окна браузера размер виджетов тоже будет меняться.

Автоматический подбор сайтов для Табло

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

Яндекс.Браузер периодически обновляет на Табло виджеты, которые вы не закрепили . Добавляются сайты, которые вы чаще других ищете через Умную строку или открываете через Табло.

Сайты, удаленные с Табло вручную, добавляться на него автоматически больше не будут. Чтобы вернуть такой сайт на Табло, добавьте его сами.

Добавление виджетов на Табло

Откройте Табло.

Под Табло нажмите Добавить → Сайт .

Укажите сайт, который вы хотите добавить на виджет Табло. Вы можете выбрать сайт из списков Популярные или Недавно посещённые , а также ввести его адрес вручную.

Ограничение. На Табло можно разместить до 20 виджетов.

Редактирование виджетов

Чтобы управлять содержимым Табло, перейдите в режим редактирования:

В режиме редактирования вы можете:

","hasTopCallout":true,"hasBottomCallout":true,"areas":[{"shape":"circle","direction":["top","left"],"alt":"Удалить виджет","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false},{"shape":"circle","direction":["bottom","left"],"alt":"Закрепить виджет","coords":,"isNumeric":false,"hasTopCallout":false,"hasBottomCallout":true},{"shape":"circle","direction":["bottom","right"],"alt":"Открепить виджет","coords":,"isNumeric":false,"hasTopCallout":false,"hasBottomCallout":true},{"shape":"circle","direction":["top","right"],"alt":"Отредактировать виджет","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false}]}}\">

	Добавить подпись и введите название сайта.

Дополнительные возможности редактирования
Изменить сайт, на который ведет виджет	Нажмите значок и введите адрес сайта в строку под Табло.
Добавить название сайта на виджет	Нажмите значок , затем в строке под Табло нажмите кнопку Добавить подпись и введите название сайта.
Откорректировать название сайта на виджете	Нажмите значок , затем исправьте название сайта в строке под Табло.

Папки с виджетами на Табло

Вы можете группировать виджеты в папки. Например, по умолчанию виджеты со ссылками на сервисы Яндекса сгруппированы в одну папку.

Создать папку с виджетами Удалить папку с виджетами

Синхронизация Табло

На разных устройствах у вас могут быть разные любимые сайты, поэтому Табло на устройствах формируется независимо друг от друга.

Чтобы узнать, какие виджеты закреплены на Табло на любом из синхронизированных устройств:

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

Отключить синхронизацию Табло

После этого на вкладке Другие устройства сайты, закрепленные на Табло, отображаться не будут.

Табло после переустановки ОС

Если на компьютере были переустановлены операционная система, а затем браузер, Табло обновится - на нем появятся виджеты по умолчанию. Но просмотреть список сайтов, закрепленных на Табло до переустановки, вы можете с помощью синхронизации (она привязана к имени устройства).

В списке устройств нажмите папку с именем компьютера до переустановки ОС. Откроется список сайтов, закрепленных на Табло до переустановки.

Если такой папки нет, то имя компьютера после переустановки, скорее всего, не изменилось. В этом случае браузер не считает компьютер новым устройством и не показывает папку с данными до переустановки. Переименуйте компьютер (Панель управления → Система и безопасность → Система → Дополнительные параметры системы → Имя компьютера ) и подождите немного, чтобы данные синхронизировались с сервером. Затем откройте вкладку Другие устройства и откройте папку со старым именем компьютера.

Пропадают виджеты на Табло

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

Чтобы виджет всегда находился на одном и том же месте, закрепите его:Сейчас

Раньше

","hasTopCallout":true,"hasBottomCallout":true,"areas":[{"shape":"rect","alt":"","coords":,"isNumeric":false},{"shape":"rect","alt":"","coords":,"isNumeric":false},{"shape":"rect","alt":"","coords":,"isNumeric":false},{"shape":"rect","alt":"","coords":,"isNumeric":false},{"shape":"circle","direction":["top","right"],"alt":"Закладки","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false},{"shape":"circle","direction":["bottom","right"],"alt":"Недавно закрытые вкладки","coords":,"isNumeric":false,"hasTopCallout":false,"hasBottomCallout":true},{"shape":"circle","direction":["top","right"],"alt":"Загрузки","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false},{"shape":"circle","direction":["top","right"],"alt":"Вкладки, открытые на другом устройстве","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false},{"shape":"rect","alt":"","coords":,"isNumeric":false},{"shape":"circle","direction":["bottom","left"],"alt":"Дополнения","coords":,"isNumeric":false,"hasTopCallout":false,"hasBottomCallout":true}]}}\">

","hasTopCallout":true,"hasBottomCallout":false,"areas":[{"shape":"rect","alt":"","coords":,"isNumeric":false},{"shape":"circle","direction":["top","right"],"alt":"Прежнее расположение всех ссылок на одной панели","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false}]}}\">

\n

В последних версиях Яндекс.Браузера отсутствуют визуальные закладки. Некоторых пользователей первоначально огорчил данный момент. Однако, не стоит расстраиваться, ведь функции виджетов выполняет Табло яндекс браузер.

Что такое Табло

Эта панелька появляется, если вы откроете новую вкладку или поместите курсор в умную строку. Если табло яндекс браузера не работает, то, скорее всего, появились проблемы в браузере, так как это встроенный элемент интернет-обозревателя. Он представляет собой восемь блоков. Кроме того, здесь расположены полезные ссылки, среди которых История, Закладки, Недавно закрытые страницы.

На Табло по умолчанию установлены виджеты различных сервисов Яндекса, что очень удобно. К примеру, здесь можно просмотреть погоду, пробки и пр . Со временем блоки будут заполняться иконками наиболее посещаемых веб-страниц. При желании, пользователь сможет закрепить в панели те сайты, которые он сам хочет.

Настройки Табло

Несмотря на то, что панель быстрых закладок является очень удобным инструментом, есть те, кто хочет убрать табло в яндекс браузере. В интернет-обозревателе имеются настройки, благодаря которым можно отключить его появление при нажатии на Умную строку. Для этого необходимо перейти в Настройки. Откроется страница, на которой необходимо найти блок, отвечающий за внешний вид обозревателя. Здесь снимаем галочку рядом с пунктом, предлагающим показывать панель при клике на умную строку. После этого вы сможете убедиться, что у вас пропало табло в яндекс браузере. Точнее говоря, оно будет появляться только при открытии новой вкладки.

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

Что делать, если исчезло табло в яндекс браузере, мы с вами узнали. Теперь подробнее рассмотрим настройку этой панели. Для того чтобы работать с ней, необходимо открыть режим редактирования. С данной целью открываем Табло и нажимаем надпись Настройка. После этого у вас появилась возможность прикреплять, удалять, менять местами виджеты. Также можно изменять город и регион в сервисах от Яндекса.

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

Если же у вас нету табло в яндекс браузере, то, скорее всего, вы пользуетесь . Хотя некоторые считают, что версия с обычной визуальной панелью закладок была значительно лучше. Ее преимущество можно отметить лишь в том, что прикреплять виджетов можно было большое количество. В Табло есть ограничение в виде 20 виджетов. Несмотря на это, оно достаточно удобное для работы и вполне может пригодиться при различной деятельности в сети, в чем вы можете сами убедиться.