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


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

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

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

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

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

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

Смотреть Демо на CodePen

API

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

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

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

Когда дело доходит до этого API, тогда  у нас будет несколько обработчиков событий:

  • Notification.onclick: Это событие будет срабатывать каждый раз, когда пользователь щелкает уведомление.
  • Notification.onshow: Когда уведомление показывается пользователю, срабатывает данное событие.
  • Notification.onerror: Данное событие срабатывает, когда в любом уведомление обнаруживается ошибка.
  • Notification.onclose: Это событие вызывается, когда пользователь закрывает уведомление.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник: webdesignmagazine.ru

Previous Как создать уведомления с помощью CSS3 и jQuery
Next Создаем собственный шрифт из иконок для сайта

Suggested Posts

Вертикальное многоуровневое меню для сайта

Манипуляции с файлом .htaccess

25 новых тем для OpenCart (июль-август 2014)

Batch Editor — пакетное редактирование товаров v0.4.8

Используем карты Google для увеличения посещаемости

Создание выпадающего мега меню на CSS3