Beautiful icon on the scoreboard Yandex Browser

Instruction | Final manifest | Image creation | Connecting the manifest |

After translating the article about site icons, I, of course, decided to set everything up as it should on my projects. That is, on personal site and icon generation service (it would be strange to create such a service, and not set up icons for it properly). However, I ran into a couple of problems.

The first of them is that for some reason the old versions of safari did not perceive the icon normally – it either appeared or disappeared. And by the method of the famous Jewish scientist Tyk, I came to the conclusion that it is better to put the apple touch icon above all the others – other browsers will not replace it with it, but in safari it will eat it first and everything will be displayed normally. That is, the order I now use is this:

<link rel="apple-touch-icon" href="https://habr.com/apple-touch-icon.png"><!-- 180×180 -->
<link rel="icon" href="https://habr.com/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="https://habr.com/icon.svg" type="image/svg+xml">
<link rel="manifest" href="https://habr.com/manifest.webmanifest">

But let’s move on to the second, main problem. The name of this problem is Yandex.Browser (Yandex Browser? Ya.Browser?). Someone, tell the guys that forever naming your applications and sites differently is a bad marketing move (Y.Disk, then Yandex.Disk or Yandex Disk, after that – just Disk and so on with all the applications in a circle).

So, Yandex Browser flatly refused to show the site icon on its scoreboard normally. Tablo is not a crude name for a person, but a page that appears when you open a new tab. To be precise, it didn’t show any icon at all – it just wrote “mihailgok” as text.

Like a good boy, the first thing I thought about was to read the API, for sure the kind people from Yandex described everything in it. Imagine my surprise when I saw this on the Yandex Browser API page:

who stole the API?
who stole the API?

NOTHING. Okay, I thought, then we google (sorry, Yandex) the problem. And we really find out that Yandex once had an API that describes how to work with a widget on a scoreboard, but when the world needed it the most, it disappeared.

Outcome:

  1. I came across one good detailed article (it has some inaccuracies, but something no longer works)

  2. I also dug up in the web archive old API.

Thus, we approached the creation of an icon for the Yandex Browser Tableau.

Here’s what to do (briefly)

  1. Create manifest file

  2. Create an image (you can use a square, but better 100 by 300)

  3. Attach manifest file

Manifest file

Let’s start with the most difficult – the manifesto.

{
    // ОБЯЗАТЕЛЬНАЯ ЧАСТЬ
    "version": "<номер_версии_манифеста>",
    "api_version": <номер_версии_API_Табло>,
    "layout": {...},
    
    // ОПЦИОНАЛЬНАЯ ЧАСТЬ
    "feed": {...}
}

where:
version – version of your manifest
api_version – the version of the api used by the manifest
layout – information of your “widget”

layout looks like this:

"layout": {
  "logo": "https://mihailgok.ru/tableau.png",
  "color": "#0035FF",
  "show_title": none
},

logo – the path to the image that will be displayed on the widget. It should have a transparent background and a resolution of 100 high and 300 wide.

The API recommends a height of up to 50, but screen resolutions have gone up since 2014. I increased the parameters by 2 times and everything works.

color – background color
show_title – information about how the title of the page is displayed

Clarifications

The logo and color fields can have both static values ​​and browser interface language-specific values. In this case, you need to specify options for different languages ​​and be sure to specify the one that will be displayed by default (that is, when the user’s browser locale is different from those listed).

"layout":
{
 "logo":
 {
  "en": "<URL картинки-логотипа для английского языка>",
  "ru": "<URL картинки-логотипа для русского языка>",
  "default": "<URL картинки-логотипа для всех прочих языков>"
 },
 "color":
 {
  "en": "<цвет виджета (hex) для английского языка>",
  "ru": "<цвет виджета (hex) для русского языка>",
  "default": "<цвет виджета (hex) для всех прочих языков>"
 }
}

Starting with the second version of the Tableau API, the show_title field can take one of three values:

  • all – the title is displayed regardless of which page of the site it was created for;

  • internal – the title is displayed only if the widget was created for the internal page of the site (by default);

  • none – the title is not displayed.

Feed (possibly outdated)

Previously, it was possible to display notifiers, however not sure if it works now.

To add a notifier to a widget, you need to describe in the manifest:

  • address of the server from which data about notifiers are requested,

  • server response format (json or xml),

  • name and notifier icon.

Notifiers are updated each time the Tableau is opened. The browser sends requests to the address in the url field, waiting for a response from the server with values. If the server returned an incorrect response three times in a row, then the notifier values ​​are reset to zero.

Limitation. Only three notifiers can be displayed on a widget.

Field structure:

"feed":
  {
      // ОБЯЗАТЕЛЬНАЯ ЧАСТЬ
      "url": "<адрес сервера, с которого запрашиваются данные о нотификаторах>",
      "format": "<формат ответа сервера: json/xml>",
  // ОПИСАНИЕ НОТИФИКАТОРА
  "notifiers": [
    {
        "name": "&lt;уникальное название нотификатора&gt;",
    //Значок нотификатора загружается с сервера сайта:
    "icon": "&amp;lt;URL значка нотификатора&amp;gt;",

    //либо используется ОДИН ИЗ предустановленных значков:
    "icon": "%BELL%",
    "icon": "%EARTH%",
    "icon": "%FRIEND%",
    "icon": "%MESSAGE%",
    "icon": "%PHOTO%",
    "icon": "%CHAT%",

    // ОПЦИОНАЛЬНАЯ ЧАСТЬ
    "&lt;span xmlns="http://www.w3.org/1999/xhtml" class="b-doc-pseudo-link"&gt;path&lt;div class="i-popup"&gt;&lt;iframe src="https://habr.com/ru/post/712064/about:blank" class="i-popup__under b-popupa__under"&gt;&lt;/iframe&gt;&lt;div class="b-popupa"&gt;&lt;i class="b-doc-popup__tail"&gt;&lt;/i&gt;&lt;div class="b-popupa__content"&gt;&lt;div class="b-dita-text"&gt;&lt;span class="pi"&gt;[no-highlight[&lt;/span&gt;&lt;p xmlns="" id="more-path"&gt;&lt;a id="more-path"&gt;&lt;/a&gt;Ответ  сервера может содержать элемент со значением нотификатора на верхнем уровне. В этом случае описание нотификатора в манифесте должно содержать только  поле &lt;span class="tag codeph"&gt;name&lt;/span&gt; с соответствующим названием. Если же значение расположено глубже в иерархии ответа, необходимо использовать поле &lt;span class="tag codeph"&gt;path&lt;/span&gt;. Это поле должно указывать на свойство (для JSON-ответа) или элемент (для XML-ответа), из которого нужно извлекать значение. Использование полей &lt;span class="tag codeph"&gt;name&lt;/span&gt; и &lt;span class="tag codeph"&gt;path&lt;/span&gt; и соответствующие ответы сервера показаны в &lt;a href="http://habr.com/web/20140929153100/http://api.yandex.ru/tableau/doc/index.xml#widget-ex"&gt;примерах для JSON- и XML-ответов&lt;/a&gt;.&lt;/p&gt;&lt;span class="pi"&gt;]no-highlight]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/span&gt;": "&amp;lt;путь к значению нотификатора&amp;gt;",
}

]
}

The server response may contain an element with a notifier value at the top level. In this case, the description of the notifier in the manifest must contain only the name field with the corresponding name. If the value is located deeper in the response hierarchy, the path field must be used. This field must point to the property (for a JSON response) or element (for an XML response) from which to extract the value. The use of the name and path fields and the corresponding server responses are shown in examples for JSON and XML responses.

Clarification

Starting from the third version of the Tableau API for the notifier, you can specify the type parameter – the type of value in the notifier:

The final manifest for the site looks like this:

{
   "version": "1.2",
   "api_version": 3,
   "layout": {
       "logo": "https://mihailgok.ru/tableau.png",
       "color": "#0035FF",
       "show_title": none
   }
}

Create a logo file and include a manifest.

Everything is simple here:

  1. Create a file 300px wide and 100px high

  2. Remove the white background (make it transparent)

  3. Place the logo (also without a background) and stretch it to full height

creating an icon file
creating an icon file
  1. Save as png file.

Generator does pretty much the same thing.

As a result, we connect our manifest to the page:

<link rel="yandex-tableau-widget" href="https://habr.com/tableau.json">

And that’s it! Finally, our site looks great on the Yandex Browser Tableau.

I made white icons and the main color as a background, it seemed so beautiful.

One problem – in order for this to be displayed, you need to delete the site from the scoreboard, clear your browser history. Then go to the site and only after you have logged in and all the content has loaded, you can add the site back to the Yandex Browser scoreboard and it will display normally.

If you add a site to the scoreboard before you log in or do not delete it from the scoreboard before clearing the cache, everything will be displayed in the old way.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *