Notification API - Уведомления на рабочем столе
Современные браузеры поддерживают уведомления.
Браузеры уважают личное пространство своих пользователей, потому спрашивают разрешения на показ уведомлений. Можно дать разрешение на показ уведомлений на 1 сеанс, или же на постоянно. Так же можно запретить уведомления.
Наверняка Вы их встречали, установив дополнения в свой браузер, или на современных сайтах.
Рассмотрим как можно выводить уведомления на своем сайте.
Примеры уведомлений:
Поддержка браузерами: *
- Chrome - начиная с версии 22
- Firefox (Gecko) - начиная с версии 22
- Opera - начиная с версии 25
- Safari - начиная с версии 6 (только Mac OSX 10.8+)
- Internet Explorer - как всегда, не поддерживает
Поддержка мобильными браузерами: *
- Firefox OS - начиная с версии 1.2
- Chrome for Android - поддерживает
- Android Webview - поддерживает
Создаем уведомления
Уведомления выводятся посредством обычного javavscript'а, потому, в Вашем js-файле добавляем следующую конструкцию:
function myNotification(titleNotify, optionsNotify) {
// Проверим поддерживает ли браузер уведомления
if (!('Notification' in window)) {
// Если не поддерживает - выводим соответствующее сообщение
alert('Ваш браузер не поддерживает уведомления рабочего стола');
}
// Проверяем есть ли у нас разрешение показать уведомление
else if (Notification.permission === 'granted') {
// Если есть - создаем уведомление
var notification = new Notification(titleNotify, optionsNotify);
}
// Если разрешения нет - спросим разрешения показать уведомление
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// Если пользователь разрешает - создаем уведомление
if (permission === 'granted') {
var notification = new Notification(titleNotify, optionsNotify);
}
});
}
}
Таким образом мы создали функцию, с помощью которой сможем выводить уведомления.
В функцию нужно передавать 2 параметра:
- titleNotify - Заголовок уведомления
- optionsNotify - Дополнительные опции уведомления
При этом, optionsNotify является объектом со своими свойствами, и вот некоторые из них:
- body - Основное содержимое уведомления
- icon - Иконка уведомления
- tag - Категория уведомления (позволяет группировать похожие уведомления, заменяя их более новыми)
Создаем HTML-страничку:
Рассмотрим пример. В примере будет использовать jQuery, поэтому убедитесь что он у Вас подключен:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Добавим элемент на страницу, по которому будем кликать, и вызывать уведомления:
<span>Click Me</span>
В js добавляем уже знакомую нам функцию:
function myNotification(titleNotify, optionsNotify) {
if (!('Notification' in window)) {
alert('Ваш браузер не поддерживает уведомления рабочего стола');
}
else if (Notification.permission === 'granted') {
var notification = new Notification(titleNotify, optionsNotify);
}
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
if (permission === 'granted') {
var notification = new Notification(titleNotify, optionsNotify);
}
});
}
}
И ниже пишем обработчик события "клик", по нашему элементу:
jQuery(document).ready(function($){
$('span').bind('click', function(){
var titleNotify = 'Это Blogpost';
var textNotify = 'Вот так отображается уведомление на рабочем столе';
var iconNotify = $('[type="image/vnd.microsoft.icon"]').attr('href');
var optionsNotify = {
body: textNotify,
icon: iconNotify,
tag: 'blogpost'
}
myNotification(titleNotify, optionsNotify);
});
});
Можете посмотреть пример того что получилось:
Делитесь полезными материалами в социальных сетях.