Время соединения 56 КБ исчезло из памяти для многих людей (мобильные пользователи не выдерживают). Это было время, когда браузеры могли открывать одну страницу там, где достаточно, и никто не мог даже предсказать будущее с помощью просмотра с несколькими вкладками. Сегодня мы перегружены социальными сетями, сообщениями, ответами, комментариями, фотографиями, видео и многим другим. Было создано несколько систем для преодоления необходимости просматривать каждую вкладку, чтобы проверять наличие новых действий. Одним из таких методов являются уведомления, которые очень распространены на разных сайтах.
Еще не так давно каждому разработчику приходилось реализовывать уведомления самостоятельно, что приводило к целому набору различных решений. W3C определил API для решения этой проблемы стандартным способом, который называется API веб-уведомлений .
На мобильных устройствах мы очень знакомы с концепцией уведомлений. Попробуйте отключиться от сети на пару часов, и, как только вы подключитесь к Интернету, вы будете перегружены уведомлениями из разных приложений, установленных на вашем устройстве. Было бы здорово иметь такой же механизм для наших веб-страниц, который без проблем работает на настольных и мобильных устройствах. Как указано во введении, такая система была разработана и стандартизирована, поэтому сегодня у нас есть API веб-уведомлений .
Образ бесстыдно украден с презентации Брэда Фроста, Смерть ерунде
Что такое API веб-уведомлений
API веб-уведомлений определяется как API для уведомлений конечных пользователей.
Уведомление позволяет предупреждать пользователя вне контекста веб-страницы о происшествии, например о доставке электронной почты.
Спецификации не описывают, как и где UA должен отображать эти уведомления. Поэтому мы будем видеть разные стили в разных браузерах и, в зависимости от используемого нами устройства, мы будем видеть уведомления в разных местах (например, на мобильных устройствах мы можем видеть их в панели уведомлений). Стоит отметить, что, прежде чем вы сможете отобразить уведомление, браузер показывает предупреждение пользователю, который должен явно дать свое согласие.
Пример уведомления с использованием API веб-уведомлений в Firefox
Этот API существует уже некоторое время, до такой степени, что спецификации менялись несколько раз. Спецификация известна двумя основными версиями. Первая версия была реализована в более старых версиях Chrome и Firefox. Теперь спецификации кажутся стабильными, хотя по состоянию на 19 апреля 2014 года это все еще W3C Working Draft.
Думать о некоторых случаях использования такого API не очень сложно. Например, вы можете получить уведомление, как только вы получите электронное письмо. Вы также можете получать уведомления, если кто-то упоминает вас в Твиттере или публикует вашу фотографию в Facebook или Google+.
Теперь, когда мы знаем, что это за API и для чего он хорош, давайте углубимся в описание его методов, свойств и событий.
Методы, свойства и события
API веб-уведомлений предоставляется через свойство Notification объекта window . Это конструктор, который позволяет нам создавать экземпляр уведомления. Он принимает два параметра — строку, содержащую заголовок уведомления, и необязательный объект настроек. Прежде чем мы увидим, как мы можем создать экземпляр, давайте посмотрим на параметры, которые мы можем указать:
-
body: строка, используемая для дальнейшего определения цели уведомления. -
lang: указывает язык уведомления. Его значение должно соответствовать стандарту BCP 47 . Примеры допустимых строк:en-USиit-IT. -
dir: Определяет направление текста сообщения. Его значение может бытьautoчто означает, что направление основано на настройках браузера,ltrдля указания направления слева направо (для европейских языков) илиrtlдля указания направления справа налево (для некоторых азиатских языков). -
tag: строка, используемая в качестве идентификатора, которая может использоваться для извлечения, замены или удаления уведомления. -
icon: указывает URL-адрес изображения, которое будет использоваться в качестве значка уведомления.
Чтобы создать экземпляр объекта Notification , мы должны написать оператор, подобный следующему:
var notification = new Notification('Email received', { body: 'You have a total of 3 unread emails' });
Довольно просто, не правда ли?
Оказывается, что настройки, которые мы только что изучили, также доступны как свойства только для чтения экземпляра уведомления. Кроме того, объект Notification предоставляет свойство, называемое permission . permission содержит строку, представляющую текущее разрешение на отображение уведомлений. Его значение может быть одним из следующих: denied , что означает, что пользователь отклонил уведомления, granted , что означает, что пользователь дал разрешение, или default , что означает, что выбор пользователя неизвестен.
Этот API предоставляет два метода: requestPermission() и close() . Как следует из названия, первый используется для запроса разрешения показывать уведомления пользователю, а второй программно закрывает уведомление. requestPermission() является методом объекта Notification и принимает необязательный обратный вызов, который выполняется, когда пользователь принимает или отклоняет разрешение. Выбор передается обратному вызову в качестве параметра, и значение может быть granted , denied или default .
close() является методом экземпляра и не принимает никаких параметров.
Иногда нам может понадобиться выполнить действие, как только статус уведомления изменится. Например, мы можем захотеть узнать, нажал ли пользователь на уведомление или когда он был закрыт. Для этого мы можем прикрепить обработчик к одному из четырех выставленных событий:
-
onclick: срабатывает, когда пользователь нажимает на уведомление. -
onclose:oncloseкак только пользователь или браузер закрывают уведомление. -
onerror:onerrorпри возникновении ошибки с уведомлением. -
onshow:onshowпри отображении уведомления.
Базовый пример использования этих событий показан ниже.
var notification = new Notification('Email received', { body: 'You have a total of 3 unread emails' }); notification.onshow = function() { console.log('Notification shown'); };
Совместимость браузера
Поддержка API веб-уведомлений не очень хороша как для настольных компьютеров, так и для мобильных устройств. На настольных компьютерах Chrome и Firefox недавно внедрили первую версию этого API. Однако, учитывая только новую версию API, реализация начинается с Chrome 22 и Firefox 22 (оба без префикса поставщика). Safari 6+ также поддерживает API веб-уведомлений. Что касается мобильных устройств, только Firefox и Blackberry имеют полную поддержку. Проверка того, поддерживает ли браузер этот API, заключается в написании чека, подобного показанному ниже.
if ('Notification' in window) { // API supported } else { // API not supported }
демонстрация
В этом разделе я покажу вам простую демонстрацию, которая позволяет вам увидеть этот API в действии. Демо состоит из двух частей. В первой части есть форма, которая позволяет вам написать текст, который будет использоваться в отображаемом уведомлении. Во второй части кнопка позволяет вам быстро увидеть, что делает этот API, используя предопределенные параметры, которые я включил в демонстрационную версию. Оба эти запроса вызовут запрос на разрешение пользователя. Как только разрешение будет дано, уведомление появится на экране в случае рабочего стола и на панели уведомлений в случае мобильного устройства.
В демонстрационной части сценариев первое, что мы делаем, это проверяем браузер, чтобы убедиться, что он поддерживает API веб-уведомлений. Если API не поддерживается, мы отображаем сообщение «API не поддерживается» и отключаем две кнопки, которые вызывают уведомления. Если браузер реализует этот API, мы присоединяем слушателя к событию click кнопок. Как видно из кода, обработчик тот же, а разные заголовок и отображаемое сообщение изменяются в соответствии с элементом, вызвавшим событие:
if (event.target.id === 'button-wn-show-preset') { // Uses the preset parameters } else { // Uses the custom parameters }
В дополнение к отображению уведомления мы прикрепляем обработчик к каждому из четырех событий, представленных экземпляром уведомления. Этот обработчик не будет ничего делать, кроме как записывать в определенный элемент формы textform событие, которое textform , и кнопку, которая его textform
Демонстрационная версия кода ниже доступна здесь .
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Web Notifications API Demo</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">API not supported</span> <form id="custom-notification" action=""> <label for="title">Title:</label> <input type="text" id="title" name="title" /> <label for="body">Body:</label> <textarea id="body" name="body"></textarea> <div class="buttons-wrapper"> <button id="button-wn-show-preset" class="button-demo">Show Preset Notification</button> <input type="submit" id="button-wn-show-custom" class="button-demo" value="Show Custom Notification" /> </div> </form> <h3>Log</h3> <div id="log"></div> <button id="clear-log" class="button-demo">Clear log</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 = 'Email received'; options = { body: 'You have a total of 3 unread emails', tag: 'preset', icon: 'http://www.audero.it/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 "' + event.type + '" triggered for notification "' + 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>
Вывод
В этой статье мы обсудили API веб-уведомлений и варианты его использования. Мы также описали методы, свойства и события, предоставляемые API. Как мы уже видели, использовать этот API довольно просто, поэтому вам не составит труда использовать его в своем следующем проекте.
К сожалению, его поддержка среди браузеров не так хороша, но поскольку Chrome, Firefox и Safari его реализовали, в среднем мы сможем охватить значительную часть наших пользователей. Чтобы закрепить концепцию, не забудьте поиграть с предоставленной демоверсией и, возможно, попытаться изменить код.