• 186
  • 0
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Всем привет,давно заметил на многих сайтах есть скрипты вывода уведомлений на рабочем столе. Порывшись в нете обнаружил вот это Notification API - Уведомления на рабочем столе.
Но чтобы выводить такие уведомления на рабочем столе ,пользователь должен разрешить их выводить.

Поддержка браузерами: *

Цитата:
Chrome - начиная с версии 22
Firefox (Gecko) - начиная с версии 22
Opera - начиная с версии 25
Safari - начиная с версии 6 (только Mac OSX 10.8+)
Internet Explorer - как всегда, не поддерживает
Поддержка мобильными браузерами: *
Цитата:
Firefox OS - начиная с версии 1.2
Chrome for Android - поддерживает
Android Webview - поддерживает

Итак приступим
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 = 'Привет вы на моём сайте';
var textNotify = 'Вот так отображается уведомление на рабочем столе';
var iconNotify = $('[type="image/vnd.microsoft.icon"]').attr('href');
var optionsNotify = {
body: textNotify,
icon: iconNotify,
tag: 'blogpost'
}
myNotification(titleNotify, optionsNotify);
});
});

titleNotify - Заголовок уведомления
optionsNotify - Дополнительные опции уведомления
При этом, optionsNotify является объектом со своими свойствами, и вот некоторые из них:
body - Основное содержимое уведомления
icon - Иконка уведомления
tag - Категория уведомления (позволяет группировать похожие уведомления, заменяя их более новыми)

Можете посмотреть пример того что получилось

Можешь почитать и вот эту статейку "HTML 5 теги"

mistakes

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

----