Софкейз

Сегодня хочу попоговорить о Notifications API в HTML5, и рассказать как их использовать :) Для тех, кто не знает что такое Notifications API, это API (К.О. с нами), вошедшее в стандарт HTML5 (но еще не утвержденное), позволяющее показывать небольшие уведомления на экране пользователя, не зависимо какая вкладка браузера в данный момент открыта.

Шаг первый: Проверка поддержки Notifications API в браузере

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

if (typeof window.webkitNotifications == 'undefined') {
	console.log('Notifications API не поддерживается вашим браузером.');
}

Шаг второй: запрос разрешения пользователя

Перед тем как отображать и использовать сообщения, необходимо запросить у пользоватея разрешение, на использование Notifications API, на вашем домене. Сделать это можно вызвав метод requestPermission :

webkitNotifications.requestPermission();

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

if (webkitNotifications.checkPermission() != 0) {
	webkitNotifications.requestPermission();
}

Есть три состояния прав:

• PERMISSION_ALLOWED [0]: Если пользователь разрешил использование нотификейшенов с текущего домена.
• PERMISSION_NOT_ALLOWED [1]: Если пользователь не предпринимал никаких действий.
• PERMISSION_DENIED [2]: Если пользователь запретил использование нотификейшенов с текущего домена.

Шаг третий. Создание обьекта сообщений

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

webkitNotifications.createNotification('icon.png', 'Заголовок', 'Проверка Notifications API');

Для создания сообщения второго типа, необходимо использовать метод createHTMLNotification , и передать ему только ссылку.

webkitNotifications.createHTMLNotification('http://sofcase.net/').show();

Только незабудьте присвоить обьекты переменным, иначе не сможете контролировать их :)

Шаг четвертый. События и обработчики

Теперь у нас есть обьект сообщений, но пользы от него мало если не показывать пользователю, давайте покажем. Для этого есть метод show .

notification.show();

И вот именно после обработки этого куска кода мы наконец увидим наше сообщение. Но одним методом show мы не ограничеваемся, также у нас есть метод close , который принудительно закрывает сообщение, и есть 3 обработчика события: onerror , ondisplay , onclose .

Собственно больше сказать нечего, функционал у данного API не широк, но по сути большего и не надо. Более подробно вы можете почитать на странице спецификации .