Notify Better.js: создание динамической фавиконки и заголовка страницы

2013-10-23 0 ∞

Скачать плагин Посмотреть демонстрацию

Возможно, вы когда-нибудь задавались вопросом, как сделать так, чтобы фавиконка (favicon) сайта динамически отображала сегодняшнюю дату, как это реализовано в сервисе Google Calendar? Если да, то сегодня ваше удивление пройдёт, потому что я хочу представить вам jQuery-плагин под названием Notify Better, который создан в помощь веб-разработчикам, которые хотят реализовать уведомления посредством фавиконки и заголовка веб-сайта, с помощью всего нескольких строк кода.

Примечание: К сожалению, браузеры Safari и Internet Explorer не поддерживают смену фавиконки при загрузке страницы. Но этот способ отлично работает на браузерах Firefox и Chrome.

Использование Notify Better.js для создания динамической фавиконки и заголовка страницы
- Очистка уведомлений
- Дальнейшая настройка
Заключение

Использование 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) - обновлять фавиконку согласно полученному значению.

Заключение

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