Notify Better.js: создание динамической фавиконки и заголовка страницы
Скачать плагин Посмотреть демонстрацию
Возможно, вы когда-нибудь задавались вопросом, как сделать так, чтобы фавиконка (favicon) сайта динамически отображала сегодняшнюю дату, как это реализовано в сервисе Google Calendar? Если да, то сегодня ваше удивление пройдёт, потому что я хочу представить вам jQuery-плагин под названием Notify Better, который создан в помощь веб-разработчикам, которые хотят реализовать уведомления посредством фавиконки и заголовка веб-сайта, с помощью всего нескольких строк кода.
Примечание: К сожалению, браузеры Safari и Internet Explorer не поддерживают смену фавиконки при загрузке страницы. Но этот способ отлично работает на браузерах Firefox и Chrome.
Использование Notify Better.js для создания динамической фавиконки и заголовка страницы
Давайте начнем!
Для начала вам нужно убедиться, что у вас имеется последняя версия библиотеки jQuery, доступной здесь, и плагина jquery.notify-better.js, который можно найти тут.
Чтобы разрешить JavaScript динамически менять вашу фавиконку, вам нужно присвоить уникальный id тегу <link>, указывающему на вашу фавиконку и создать скрытый контейнер, в котором будет отображаться уведомление.
HTML-разметка:
<link rel="shortcut icon" id="favicon" href="favicon.png">
<div id="notification"></div>Теперь, просто вызовите функцию notify_better, передав ей id скрытого контейнера, который мы добавили ранее:
Код JS:
$("#notification").notify_better({
interval: 2000,
url: "random_count.html",
overrideAjax: false,
updateTitle: false,
updateFavicon: {
id: "favicon",
backgroundColor: "#f1c40f",
textColor: "#6D461D",
location: "full",
shape: "square"
},
done: function() {
alert("done!")
}
});С помощью этого вызова, скрипт автоматически опрашивает счетчик в определенные интервалы времени и обновляет содержимое контейнера, фавиконку и/или заголовок страницы с помощью числа, полученного посредством AJAX.
Причина, по которой я решил добавить автоматический опрос, заключается в том, что иногда пользователь может получать уведомления, работая с другими вкладками браузера. С помощью данного скрипта пользователь будет знать о новых уведомлениях без необходимости переключения на вкладку, в которой открыт ваш сайт.
Доступны следующие настройки:
- Интервал позволяет определять временной промежуток между опросами. Стандартное значение 5000 миллисекунд (5 секунд). Это означает, что скрипт будет пытаться получить значение счетчика каждые 5 секунд. Установите значение данного параметра в 0 или задайте значение false, чтобы скрипт запускался только один раз при загрузке или обновлении страницы;
- URL будет использоваться вызовом AJAX для получения значения счетчика. Вам нужно иметь URL-адрес, обратившись по которому, скрипт сможет получить значение счетчика в виде простого числа, которое затем будет использовано при обновлении. Этот параметр будет проигнорирован, если параметр overrideAjax установлен в значение on;
- overrideAjax это параметр, который позволит вам переопределить вам стандартный вызов AJAX своим собственным, что дает возможность настроить возвращаемые данные и то, как они будут отображаться. Более подробно об этом написано ниже.
- updateTitle если данный параметр установлен в значение true, то к заголовку веб-сайта будет добавлено значение счетчика, которое будет автоматически обновляться при каждом опросе. Например, когда скрипт получает значение 99, заголовок будет выглядеть следующим образом: «(99) Заголовок страницы»;
- updateFavicon позволяет задать следующие параметры:
- id определяет идентификатор тега <link>, указывающего на фавиконку:
- backgroundColor позволяет задать фоновый цвет фавиконки;
- textColor задает цвет текста на фавиконке.;
- location дает возможность задать позицию выводимого на фавиконке текста. Доступные варианты: full (текст будет в размер фавиконки), ne (northeast - северо-восток), nw (northwest - северо-запад), se (southeast - юго-восток) и sw (southwest - юго-запад);
- shape позволяет определить форму уведомления. Можно выбрать между square и circle (квадрат и круг, соответственно).
- Done это вызов функции, который происходит после выполнения всех операций. Подходит для уведомления пользователя о том, что опрос был закончен.
Очистка уведомлений
Учитывая количество опций, удалять каждое уведомление вручную было бы сущим кошмаром. Если вы хотите очистить все просмотренные пользователем уведомления, просто вызовите функцию:
$("#notification").clear();и ваша фавиконка и сайт вернутся в изначальное состояние.
Дальнейшая настройка
В некоторых случаях, вам может понадобиться обработать вызов AJAX и возвращаемые данные самостоятельно. С помощью параметра overrideAjax, вы можете сделать это, вызвав функцию notify_better следующим образом:
$("#notification").notify_better({
overrideAjax: function() {
$.ajax({
url: "count.html",
}).done(function(data, textStatus, jqXHR) {
titleclear();
changeFavicon(data)
...
});
}
});Убедитесь, что вы вызвали методы titleclear() и changeFavicon(data) внутри вызова функции done, если хотите, чтобы плагин работал корректно. Функция titleClear будет очищать заголовок сайта от результатов работы предыдущего уведомления, а changeFavicon(data) - обновлять фавиконку согласно полученному значению.
Заключение
Теперь у вас есть динамическая фавиконка и заголовок, которые автоматически обновляются, отображая новое значение счетчика. Я надеюсь, что вы получили удовольствие и пользу от этого урока и от использования представленного плагина.