Web Notifications API

Время dial-up соединения 56kb для многих людей в далёком прошлом. После скрежета и пищащих звуков модема, браузер мог открыть только одну страницу, и этого было достаточно. В то время пользователи могли только мечтать о нескольких вкладках в браузере.

Оглавление:
  1. Свойства, методы и события
  2. Совместимость С Браузерами
  3. Демонстрация Web Notifications API
  4. Заключение

В настоящее время интернет переполнен социальными сетями, публикациями, онлайн играми, комментариями, фотографии, видео, и многое другое. В результате, разработчики создали уведомления, которые сейчас распространены на многих веб-сайтах.

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

В W3C решили что, было бы неплохо иметь один и тот же механизм для веб-страниц, который идеально работал бы на ПК и мобильном устройстве. Для решения этой проблемы стандартным способом в W3C создали API и называли его Web Notifications API.

Web Notifications API уведомляет пользователя, например, о том что на странице был добавлен комментарии, даже если пользователь не находится на странице где был добавлен комментарий. Спецификация не описывает, где и как клиент пользователя должен показать эти уведомления. Поэтому различные типы уведомлений в разных браузерах в разных местах (например, на мобильных устройствах, мы можем увидеть их в панели уведомлений).

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

Браузер спрашивает согласие пользователя
Вопрос браузера к пользователю

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

Web Notifications API существует уже давно, но технические характеристики менялись несколько раз. У спецификации есть две основные версии. Первая версия была реализована в более ранних версиях Chrome и Firefox. Теперь, спецификация кажется стабильной, хотя по состоянию на 3 мая 2014 это все еще проект W3C.

Для чего применить Web Notifications API догадаться не трудно. Например, Вы можете получать уведомления о сообщении на электронную почту. Вы также можете получить уведомление, если кто-то упоминает вас в Tweet или комментирует вашу фотографию в Facebook или Google+.

Свойства, методы и события

Web Notifications API доступен через свойства окна объекта. Это конструктор, который позволяет нам создать экземпляр уведомления. Он принимает два параметра, они содержат название уведомления и также дополнительные настройки объекта.

Пред тем как мы создадим пример Web Notifications API, давайте посмотрим на настройки:

  • body: — используемая для дальнейшего уточнения целей уведомления.
  • lang: — определяет язык уведомления. Например ru-RU (язык указан и в html, поэтому в скрипте его нет).
  • dir: — определяет направление текста уведомления. Смысл в том, что направление основано на настройках браузера ltr — слева направо (для европейских языков), или rtl — справа налево (для некоторых азиатских языков).
  • tag: — используется как идентификатор, который может быть использован для извлечения, замены или удаления уведомления.
  • icon: — URL-адрес изображения для иконки уведомлений.
dictionary NotificationOptions {
NotificationDirection dir = "auto";
DOMString lang = "";
DOMString body;
DOMString tag;
DOMString icon;
};

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

var notification = new Notification ('Уведомление электронной почты', {
body: 'У вас 8 непрочитанных сообщений'
});

Установленные параметры в этом коде, доступны только для чтения свойств уведомления. Кроме того, строка содержит свойство, подтверждение право для отображения уведомления. Свойство принимает одно из трёх значений:

  1. denied — означает, что пользователь запретил уведомления
  2. granted — означает что пользователю было выдано разрешение
  3. default — означает что выбор пользователя, неизвестен.

Интерфейс этого API предоставляет два метода: requestPermission() и close(). Из названия можно догадаться, что requestPermission() чтобы запросить разрешение на показ уведомлений пользователю, в то время как close() программно закрывает уведомления. requestPermission() это метод Notification и принимает обратный вызов, который выполняется, когда пользователь принимает или отказывает в предоставлении разрешения. Выбор обратного вызова передается в качестве параметра, где значения могут быть granteddenied или default.

Метод close() в примере не принимает никаких параметров.

Если вам нужно знать, когда пользователь посмотрел уведомления, или когда он их закрыл, нужно выполнить ряд дополнительных действий. Нужно подключить обработчик к одному из четырех событий:

  • onclick: срабатывает, когда пользователь нажимает на уведомление.
  • onclose: срабатывает, как только пользователь закрывает уведомления.
  • onerror: срабатывает, если есть ошибка о получении уведомления.
  • onshow: срабатывает, когда отображается уведомление.

Простейший пример применения этих событий показано ниже.

var notification = new Notification ('Уведомление электронной почты', {
body: 'У вас 8 непрочитанных сообщений'
});

notification.onshow = function() {
console.log('Уведомление показано');
};
к меню ↑

Совместимость С Браузерами

Web Notifications API не очень хорошо поддерживается браузерами как на ПК, так и для мобильных устройств. Недавно в Chrome и Firefox для ПК работала только первая версия Web Notifications API. Но, теперь начиная с Chrome 22 и Firefox 22 работает новая версия Web Notifications API (без префиксов). Сафари 6+ также поддерживает Web Notifications API. Полностью Web Notifications API поддерживают только Firefox и Blackberry.

Поддерживает или не поддерживает браузер этот API, можно узнать добавив код:

if ('Notification' in window) {
// API поддерживается
} else {
// API не поддерживается
}
к меню ↑

Демонстрация Web Notifications API

В этом разделе простой пример, который покажет Web Notifications API в действии. Демонстрация Web Notifications API состоит из двух частей. В первой части, есть форма, которая позволяет вводить текст, он будет использоваться в отображаемом уведомлении.

Уведомление электронной почты:

Демонстрация Web Notifications API уведомление электронной почты
Web Notifications API уведомление электронной почты

Заголовок и уведомление Web Notifications API:

Демонстрация Web Notifications API заголовок и уведомление
Web Notifications API заголовок и уведомление

Во второй части, ведётся журнал событий Web Notifications API. Оба эти запроса будут спрашивать разрешение пользователя.

Первое, что нужно сделать — это протестировать браузер, чтобы узнать, поддерживает он Web Notifications API. Если Web Notifications API не поддерживается, на экране мы увидим сообщение “API не поддерживается”, и отключатся две кнопки, которые запускают уведомления. Если браузер понимает интерфейс Web Notifications API, мы увидим кнопку события click. В коде ниже, обработчик такой же, отличие только в заголовке и сообщении, которое меняется в зависимости от элемента вызванного события:

if (event.target.id === 'button-wn-show-preset') {
// Использует заданные параметры
} else {
// Использует пользовательские параметры
}

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

Web Notifications API

Код Web Notifications API разработан разработчиком приложений Аурелио Де Роза

Код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Демонстрация Web Notifications API</title>
<style>
*
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body
{
max-width: 500px;
margin: 2em auto;
padding: 0 0.5em;
font-size: 20px;
}

h1
{
text-align: center;
}

.hidden
{
display: none;
}

#custom-notification
{
margin-top: 1em;
}

label
{
display: block;
}

input[name="title"],
textarea
{
width: 100%;
}

input[name="title"]
{
height: 2em;
}

textarea
{
height: 5em;
}

.buttons-wrapper
{
text-align: center;
}

.button-demo
{
padding: 0.5em;
margin: 1em;
}

#log
{
height: 200px;
width: 100%;
overflow-y: scroll;
border: 1px solid #333333;
line-height: 1.3em;
}

.author
{
display: block;
margin-top: 1em;
}
</style>
</head>
<body>
<h1>Пример Web Notifications API</h1>
<span id="wn-unsupported" class="hidden">В вашем браузере Web Notifications API не поддерживается!</span>

<form id="custom-notification" action="">
<label for="title">Заголовок:</label>
<input type="text" id="title" name="title" />

<label for="body">Уведомление:</label>
<textarea id="body" name="body"></textarea>

<div class="buttons-wrapper">
<button id="button-wn-show-preset" class="button-demo">Узнать о уведомлениях</button>
<input type="submit" id="button-wn-show-custom" class="button-demo" value="Посмотреть моё уведомление" />
</div>
</form>

<h3>Журнал</h3>
<div id="log"></div>
<button id="clear-log" class="button-demo">Очистить журнал</button>

<script>
if (!('Notification' in window)) {
document.getElementById('wn-unsupported').classList.remove('hidden');
document.getElementById('button-wn-show-preset').setAttribute('disabled', 'disabled');
document.getElementById('button-wn-show-custom').setAttribute('disabled', 'disabled');
} else {
var log = document.getElementById('log');
var notificationEvents = ['onclick', 'onshow', 'onerror', 'onclose'];

function notifyUser(event) {
var title;
var options;

event.preventDefault();

if (event.target.id === 'button-wn-show-preset') {
title = 'Уведомление электронной почты';
options = {
body: 'У вас 8 непрочитанных сообщений',
tag: 'preset',
icon: 'http://demo.htmlhook.ru/favicon.ico'
};
} else {
title = document.getElementById('title').value;
options = {
body: document.getElementById('body').value,
tag: 'custom'
};
}

Notification.requestPermission(function() {
var notification = new Notification(title, options);

notificationEvents.forEach(function(eventName) {
notification[eventName] = function(event) {
log.innerHTML = 'Событие "' + event.type + '" выполнено для уведомления "' + notification.tag + '"<br />' + log.innerHTML;
};
});
});
}

document.getElementById('button-wn-show-preset').addEventListener('click', notifyUser);
document.getElementById('button-wn-show-custom').addEventListener('click', notifyUser);
document.getElementById('clear-log').addEventListener('click', function() {
log.innerHTML = '';
});
}
</script>
</body>
</html>
к меню ↑

Заключение

В этой статье Вы увидели пример Web Notifications API и варианты его использования. А также описаны методы, свойства и события, предоставляемые этим API. Web Notifications API довольно простой, как только будет хорошая поддержка браузерами, его будет не трудно применить для своего проекта.

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