Продающие лендинги от отдела
дизайна LPgenerator

Используем технологии:
4U, AIDA, ХПВ, психология влияния Р. Чалдини, управление взглядом
  • 4U
  • AIDA
  • ХПВ
  • психологии влияния Р. Чалдини
  • управления взглядом
  • нейромаркетинг
Готовность от 7 дней

Что такое API Уведомления и как их использовать

29 messages

Все привыкли к уведомлениям в браузерах. Мы постоянно получаем их на таких сайтах, как ВКонтакте, Твиттер, Фейсбук. Теперь, с помощью API уведомлений, мы можем перенести все эти оповещения прямо на рабочий стол. Представьте себе веб-сайт, выполняющий задачу вывода уведомлений на рабочий стол, в то время как пользователь проверяет свою электронную почту и находится совсем не в той социальной сети, от которой появляются оповещения.

Поддержка браузеров

В настоящее время “API Notifications” является проектом в процессе разработки, так что он не поддерживается всеми браузерами. Тем не менее, Chrome, Mozilla и Safari идут в ногу со временем!

Еще более радует то, что Chrome, Mozilla и Safari используют одинаковый синтаксис. В настоящее время, IE не имеет таковой поддержки, но мы ожидаем ее в ближайшее время (комментарии излишни! ;)

API

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

var notification = new Notification(title, options)

Как видите, первым является title, этот параметр довольно понятен, он будет полужирным текстом в уведомлении, так как это первое, что видит пользователь. Во-вторых, у нас есть options, этим параметром будет объект, у которого может быть несколько свойств:

  • dir: Направление уведомления, у него могут быть значения auto, ltr, или rtl.
  • lang: Здесь вы можете указать язык, который будет использоваться в вашем уведомлении.
  • body: В теле вы можете разместить любое дополнительное содержание, которое вы хотите отобразить.
  • tag: С тегом можно добавить ID к уведомлению .
  • icon: С помощью этого свойства можно применить значок к вашему уведомлению.
  • Когда дело доходит до этого API, тогда у нас будет несколько обработчиков событий:
  • Notification.onclick: Это событие будет срабатывать каждый раз, когда пользователь щелкает уведомление.
  • Notification.onshow: Когда уведомление показывается пользователю, срабатывает данное событие.
  • Notification.onerror: Данное событие срабатывает, когда в любом уведомление обнаруживается ошибка.
  • Notification.onclose: Это событие вызывается, когда пользователь закрывает уведомление.

С помощью этих обработчиков событий и нескольких функций, вы сможете очень даже креативно оформить свои уведомления.

Создание уведомления

В данном примере будeт показываться уведомление для пользователя, который нажал кнопку на странице. Но вы можете привязать это к чему угодно, от нового личного сообщения до оповещения о новом друге на Фейсбуке.
Кнопка:

<button class="notification”>Показать оповешение!</button>

Это весь HTML, который нам понадобится. Теперь мы переходим к JavaScript, где будет формироваться уведомление.

Первое, что нам нужно сделать, это добавить событие щелчка (click event) для кнопки, а затем проверить поддержку браузеров по уведомлениям:

$('.notification').click(function() {
if (!("Notification" in window)) {
console.log(“У нас есть оповещения, но ваш браузер не поддерживает их");
}
});

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

Следующим шагом в нашем код будет проверка того, дал ли нам пользователь разрешение показать уведомление. Если он согласен, тогда мы можем показать уведомление прямо здесь:

else if (Notification.permission === "granted") {
var notification = new Notification();
}

Пока мы оставим объект уведомления пустым и заполним его позже.

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

Теперь мы попросим у пользователя разрешение, чтобы показать наши уведомления и сохранить это значение:

Notification.requestPermission(function (permission) {
if(!('permission' in Notification)) {
Notification.permission = permission;
}
});

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

if (permission === "granted") {
var notification = new Notification();
}

Сейчас наш объект уведомления пуст, и мы должны заполнить его, чтобы его можно было видеть.

В этом примере, мы поставим заголовок, текст и иконку. Наш объект будет выглядеть примерно так:

var notification = new Notification('Уведомление’, {body: 'Удачи всем!’, icon: 'http://youriconwebsite.com/100/100'});

Не забудьте также изменить объект уведомления вверху. Вот и весь код – все очень легко и просто! Удачи в ваших проектах.

Высоких конверсий! 

14 марта 2016

Продающие лендинги от отдела
дизайна LPgenerator

Используем технологии:
4U, AIDA, ХПВ, психология влияния Р. Чалдини, управление взглядом
  • 4U
  • AIDA
  • ХПВ
  • психологии влияния Р. Чалдини
  • управления взглядом
  • нейромаркетинг
Готовность от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".