Как отключить оповещения в браузере и запретить сайтам показывать запросы на показ уведомлений

Наверняка все, кто пользовался почтой от Google, хоть раз видели уведомления вроде этого:
Уведомления почты gmailЭти уведомления называются HTML5 Notifications, и они видны, даже если перейти в другую вкладку или вообще свернуть браузер.
После прочтения этой статьи вы сможете сделать такие же уведомления и для своего сайта. Код простой, кроссплатформенный, и непосредственно отправка уведомления занимает всего 1 строку на любимом jаvascript.
Также в конце статьи есть готовая функция, с помощью которой можно начать отправлять уведомления, не вникая в подробности.
Согласно сайту caniuse.com, сейчас такие уведомления (HTML5 Notifications) работают в браузерах Chrome, Firefox (35+), Opera (27+), Safari (7.1+). Internet Explorer поддержки интернета уведомлений не имеет. Если рассматривать мобильные платформы, то частичная поддержка HTML5 Notifications есть только у Android Browser.
Перед тем, как непосредственно отправлять уведомления, нам нужно получить права (permission) на это.
Сделать это можно методом Notification.requestPermission():
1
2
3
4

Notification.requestPermission(function(permission){
// переменная permission содержит результат запроса
console.log('Результат запроса прав:', permission);
});

После выполнения метода, результат запроса на права будет лежать в переменной permission.
Вот её разные значения с пояснениями:
  • default — запрос на получение прав не отправлялся;
  • granted — пользователь разрешил показывать уведомления;
  • denied — пользователь запретил показывать уведомления.
Получив права, можем приступать непосредственно к отправке уведомлений.
Делается это очень просто, одной строкой:
1

var notification = new Notification(title, options);

title — заголовок уведомления,
options (опционально) имеет следующие параметры:
  • body — тело уведомления (основной текст), в разных браузерах и ОС обрезается по-разному (например, в Chrome под Win 8.1 максимальная длинна – 200 символов);
  • dir — направление отображения уведомления, может быть auto, ltr (слева направо) или rtl (справа налево);
  • lang — язык уведомления;
  • tag — уникальный идентификатор уведомления, с помощь которого можно заменить его другим уведомлением или удалить;
  • icon — URL изображения, которое будет показано в уведомлении (рекомендуем разрешение 40×40 px).
Попробуем установить параметры и отправить уведомление:
1
2
3

var notification = new Notification('Сколько ТЫЖ программистов нужно чтобы вкрутить лампочку?',
{ body: 'Только ты!', dir: 'auto', icon: 'icon.jpg' }
);

Результат выполнения кода вышеТакже у notification есть методы-обработчики событий onclickonshowonerroronclose:
1
2

function clickFunc() { alert('Пользователь кликнул на уведомление'); }
notification.onclick = clickFunc;

Результат:
При клике

Одна функция для всего

Теперь соберем всё в единую функцию и добавим несколько проверок на ошибки:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

function sendNotification(title, options) {
// Проверим, поддерживает ли браузер HTML5 Notifications
if (!("Notification" in window)) {
alert('Ваш браузер не поддерживает HTML Notifications, его необходимо обновить.');
}
 
// Проверим, есть ли права на отправку уведомлений
else if (Notification.permission === "granted") {
// Если права есть, отправим уведомление
var notification = new Notification(title, options);
 
function clickFunc() { alert('Пользователь кликнул на уведомление'); }
 
notification.onclick = clickFunc;
}
 
// Если прав нет, пытаемся их получить
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// Если права успешно получены, отправляем уведомление
if (permission === "granted") {
var notification = new Notification(title, options);
 
} else {
alert('Вы запретили показывать уведомления'); // Юзер отклонил наш запрос на показ уведомлений
}
});
} else {
// Пользователь ранее отклонил наш запрос на показ уведомлений
// В этом месте мы можем, но не будем его беспокоить. Уважайте решения своих пользователей.
}

Теперь у нас есть красивая функция, с помощью которой можно просто отправлять уведомления, не отвлекаясь на запрос прав или поддержку браузера:
1
2
3
4
5

sendNotification('Верните Линуса!', {
body: 'Тестирование HTML5 Notifications',
icon: 'icon.jpg',
dir: 'auto'
});

Результат выполнения функции в разных браузерах:
Внешний вид уведомления в ChromeВнешний вид уведомления в Firefoxскачать dle 11.3
IT

Добавить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent
Кликните на изображение чтобы обновить код, если он неразборчив