Все привыкли к уведомлениям в браузерах. Мы постоянно получаем их на таких сайтах, как ВКонтакте, Твиттер, Фейсбук. Теперь, с помощью 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: '//youriconwebsite.com/100/100'});Не забудьте также изменить объект уведомления вверху. Вот и весь код – все очень легко и просто! Удачи в ваших проектах.
Высоких конверсий!
