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

Существует пара наиболее распространенных способов оповещения пользователя. С одной стороны, социальные сети Facebook, Twitter и LinkedIn указывают определенное число, которое соответствует количеству обновлений. С другой стороны, Trello отображает небольшой красный кружок поверх favicon.

Trello Facebook and Twitter notifications
Оповещения Trello, Facebook и Twitter

В этом уроке мы воссоздадим подобные оповещения. Посмотрите демо, чтобы понять, чем мы будем заниматься.

Демо (рус.) Посмотреть на GitHub

Мы начнем с добавления числа обновлений к названию страницы, как это сделано у Facebook и Twitter.

Существует множество способов извлечения данных (спросите у знакомого разработчика). В нашем же случае мы допустим, что уже знаем количество обновлений и теперь можем поиграться с JavaScript. На данный момент у нас ноль обновлений:

var count = 0;

Далее следует основная часть кода, которая будет изменять название страницы.  Прежде всего добавим document.title, который получает текущее название страницы:

Затем создаем новую функцию, которая будет изменять часть названия:

Здесь вы видите, что мы используем оператор JavaScript ++. Для демонстрационных целей «++" увеличит число count на 1.

Теперь создадим новую функцию, которая запустит changeTitle():

Функция выше будет проверять обновления каждые 2000 миллисекунд (2 секунды). Функция запустится, как только загрузится страница.

Первый метод — довольно прямолинейный. Мы получаем число обновлений и передаем его в название. Вы можете поменять скобки с ( ) на [ ] или { } в функции changeTitle().

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

Начинаем с привязки favicon к документу.

Затем укажем путь к новому favicon с помощью переменной JavaScript.

Как и в первом методе, мы создаем две функции:

Первая функция, changeFavicon(), заменит нашу первоначальную favicon на тот, что с красным кружком. Вторая функция, newUpdate(), будет исполнять первую функцию через определенный промежуток времени.


Кажется есть, на что посмотреть!

Второй метод не такой сложный, каким кажется на первый взгляд — наоборот, он проще чем первый, где мы обновляли название страницы. Кроме того, мы можем проявить немного креатива, добавив анимации к favicon. Но без особого фанатизма.

Заметка: Chrome не поддерживает favicon с анимацией.

Итак, последний способ — использование JavaScript библиотеки Favico.js, автором которой является Miroslav Magda. Библиотека предоставляет удобный API с множество различных опций.

Начнем мы с указания параметров нового Favico: положение, анимация, фоновый цвет, цвет текста.

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

В какой-то мере наш код напоминает первый метод. Мы начинаем с создания функции, которая будет симулировать количество обновлений. Вторая функция, showFaviconBadge(), будет вставлять это число в бейдж и отображать сам бейдж в favicon. Последняя функция newUpdate() запустит вторую через определенный интервал.

В этом уроке мы научились использовать название вкладки браузера в качестве средства оповещения пользователей. Мы  воссоздали методы, которые применяются на таких популярных веб-сайтах, как Facebook, Twitter, и Trello.

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

Перевод оригинальной статьи