• 51
  • 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 - Категория уведомления (позволяет группировать похожие уведомления, заменяя их более новыми)

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

Можешь почитать и вот эту статейку "Фоновое слайдшоу"

mistakes

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

Ваше мнение

Какие темы вам интереснее?
Результаты

----