Пользователь
0,0
рейтинг
17 июня 2013 в 20:44

Разработка → HTML 5 Notifications API


Привет, Хабр. В этой статье я расскажу о HTML Notification API.

Какие возможности предоставляет Notification API


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

Поддержка в браузерах


  • Safari 6
  • Chrome 27
  • Firefox 22

Opera 15 beta не работает с Notifications API, несмотря на наличие конструктора Notification.
На мобильных платформах технология не работает.
В движке webkit есть старая нотация в виде webkitNotifications.

Как это работает


Цикл работы следующий:
  1. Получить разрешение на отправку;
  2. Правило фиксируется для сайта;
  3. Отправить уведомление.


Ваше первое уведомление


Прежде чем отправить уведомление, желательно проверить наличие разрешения.

Проверка разрешения

Всего есть 3 вариации разрешения:
  • Default
  • Denied
  • Granted


Для проверки разрешения я нашел 3 способа:

1. Через значение свойства Notification.permission.

switch ( Notification.permission.toLowerCase() ) {
    case "granted":
        // можно
        break;

    case "denied":
        // нельзя
        break;

    case "default":
        // спросить
}

Недостатки:
  • В google chrome свойство permission не определено( не смотря на документацию — «The static permission attribute must return permission» ).


2. Через попытку получить разрешение на отправку
var currentPermission;
Notification.requestPermission( function(result) { currentPermission = result  } );

Недостатки:
Если состояние default, то пользователь увидит вопрос о желании сайта отправлять уведомления. Пока пользователь не выберет что либо, callback функция не сработает и вы не получите статус.

Маленький хинт:
Можно определить состояние default через requestPermission используя задержку в callback.
var permission,
     timer = setTimeout( function() { permission = "default" }, 500 );
Notification.requestPermission( function(state){ clearTimeout(timer); permission = state } );


3. Через отправку уведомления
У каждого уведомления есть события, подробности позже.
var notify = new Notification("test");
notify.onerror = function(){
     console.log("permission state = default or denied");
};

Недостатки:
Срабатывает при двух статусах.

Получение разрешения

Notification.requestPermission срабатывает при разрешении default и принимает функцию, которая получает выбранное разрешение как аргумент.
Notification.requestPermission( newMessage );

function newMessage(permission) {
    if( permission != "granted" ) return false;
    var notify = new Notification("Thanks for letting notify you");
};


upd: kromxr подсказывает, что запрос разрешения произойдет только после какого-либо события. Например пользователь нажал на кнопку «разрешить системные уведомления».

Отправка уведомления

Вот и дошли до уведомлений:
var mailNotification = new Notification("Андрей Чернышёв", {
    tag : "ache-mail",
    body : "Привет, высылаю материалы по проекту...",
    icon : "http://habrastorage.org/storage2/cf9/50b/e87/cf950be87f8c34e63c07217a009f1d17.jpg"
});

И результат:


Разбираемся:
«Андрей Чернышёв» — Заголовок уведомления ( обязательный )
Обрезается в разных браузерах и ОС по разному, рекомендую ограничится 15-ю символами.

tag — тег, связывайщий уведомления в цепочку.
Делает уведомления с одинаковыми тегами взаимозаменяемыми.

body — контент уведомления.
Обрезается в разных браузерах и ОС по разному, рекомендую ограничится 20-ю символами.

icon — иконка уведомления.
Не отображается в chrome и safari под OS X.

События уведомлений

Уведомление имеет 4 события:

onclick
Срабатывает при клике на тело уведомления. Не сработает при клике на крестик или кнопку close ( mac os ).

onshow
Срабатывает при показе уведомления.

onerror
Срабатывает, при попытке показать уведомление без разрешения на это ( default, denied ).

onclose
Срабатывает, когда окно закрывается.
Есть проблема в chrome на windows. Событие close не срабатывает при клике на уведомление.

Изменение решения


В любой момент в браузере можно удалить \ изменить решение об уведомлениях.
Chrome: preferences — settings — show advanced settings — privacy — content settings — notifications.
Safari: preferences — notifications.
Firefox: правой кнопкной мыши на странице — информация о странице — разрешения — отображать уведомления.

Ссылка для визуального восприятия информации
Андрей Чернышев @delch
карма
14,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (66)

  • +12
    То есть работает сейчас практически нигде и можно использовать только как игрушку?
    • +5
      Хм… Оно работает, для любимых сайтов/бизнес приложений — актуально.
      Более того — используем сами(бизнес-приложения). Пользователи довольны.
    • +3
      Ну почему, — на закрытых системах, типа интранетов, где можно сказать «нужно сидеть в таком то браузере» очень даже можно )
      ps. Обновил же до отправки, не было ответа. Но на одной волне, так что правда )
      • 0
        Правда я не очень могу себе представить потребность в уведомлениях в интранетах.
        • +2
          Имел ввиду использование в корпоративных интранет-системах :)
          Ну а сценариев использования ведь много может быть, — пришло задание, пришла внутренняя почта, сообщение чата и т.д., т.п.
        • 0
          Как минимум делать то, что делает сейчас, например, вконтакте, только уже на уровне стандарта
      • 0
        Только почему-то в моем случае этим браузером оказывается IE :(
    • 0
      отчасти да, сейчас chrome и safari 6 (osx). Скоро выйдет firefox 22 ( пруф ), где поддержка есть, и надеюсь опера тоже поправит текущий баг с уведомлениями в своей 15 версии.
    • 0
      Vk использует как уведомление пользователю о сообщении. Очень удобная штука. Тем более если браузер ее не поддерживает ничего страшного не случится. Узнает о сообщении другим способом.
    • 0
      Кстати, об играх: Годвилль
      Там реализованы всплывашки при определённых событиях. Появилось около полугода назад
  • +3
    На нескольких мониторах не совсем ожидаемая область нотификации. В настройках выставлено справа внизу. А в целом интересная фича.
    • +18
      Offtop: вам кажется письмо пришло!
  • +1
    Уважаемые, а подскажите, у vk также реализована нотификация? Дело в том что там просто в настройках необходимо установить галочку в «показывать сообщение» и всё. Никаких системных диалогов о подтверждении, да и в хроме, в настройках всплывающих окон в фильтре vk.com нет.
    • +1
      разве там не только на вкладке вконтакта?
      • +1
        Нет, при фоновой вкладке vk — уведомления показываются точно также как и сабжевые.
        • 0
          тока что проверил — там сабжевые и есть.
    • –1
      Нет, там сообщения с сервера JS-ом ловятся и выводятся, но как отметили выше, только на вкладке. А тут уже как бы нативная поддержка браузером.
    • +1
      У vk также реализована нотификация, но она реализована не так же.
      • 0
        чем не так же? те что на любой вкладке показываются — такие и есть. подругому сделать невозможно, без плагинов.
    • –2
    • 0
      Насколько я помню в первый раз появляется нативное уведомление, но автоматом стоит галочка «всегда для vk.com»
  • 0
    Яндекс.Почта использует подобные уведомления прямо в браузере на любой открытой вкладке (лишь бы а одной из открытых вкладок был бы сервис Яндекса). При этом работает эта фича в текущих версиях браузеров (те же Опера 12,5, Опера 15, FF 21).
    Понятно, что там не HTML5 Notifications API, но, видимо, навеяно этой возможностью.
    • +2
      Уведомление на странице — всего лишь стилизованный блок, а те уведомления, что описаны в статье, всплывают даже при свернутом браузере.
      • 0
        Ясно, спасибо, важное замечание про свёрнутый браузер. С другой стороны функция уведомления работает «здесь и сейчас», хотя и с некоторыми ограничениями, но зато на любой активной вкладке.
        • 0
          Так «graceful degradation» никто не отменял. Если сие не поддерживается, то можно велосипеды крутить. Описанное в статье что-то вроде уведомлений Skype, аль иных приложений подобного рода. Им не важно, открыта у вас вкладка, аль нет.
          • 0
            Прошу прощения, но я ошибся. Просто у меня на работе запущен и Яндекс.Браузер, а он, естественно, поддерживает HTML 5 Notifications API и именно он выдаёт мне такие окошки уведомлений. А я был уверен, что это кодеры яндекса такие молодцы :)
    • 0
      может это каким то расширением реализованно? у меня яндекс почта так не уведомляет.
      • 0
        Вы правы, эти уведомления мне присылал запущенный я.браузер, см. комментарий чуть выше.
  • +2
    > Opera 15 не работает с Notifications API

    Давайте не будем писать, что работает или не работает в не вышедшем барузере, или хотя бы будем указывать, что речь идет об альфе/бете.
    • +1
      Подписал beta.
      • +2
        Фактически это даже не альфа, это болванка на которую опера будут прикручивать фичи.
        • –1
          Опера 15 это стилизованный браузер Хромиум переделанный Opera Inc.
          Я сам обрадовался когда увидел релиз. Но сильно растроился когда потестил. Слишком много завязок на хромиум (в итоге баги). Поспешили они даже с выходом Бета релиза.
          • 0
            Под словом даже не альфа, я подразумевал, что это не альфа, не бета, не релиз кандинат, не релиз, не голд и прочее, что означает, что функционал хоть как-то устаканился и больше его не будут трогать. Это девелопер превью версия, что значит: «Ребята, посмотрите что мы тут начали кодить, но сильно не бейте, ибо мы только начали и планов у нас много, всё поменяется».
  • 0
    Ещё интереснее — использовать уведомления в паре с расширениями броузера (по крайней мере в хроме). Например, при закрытой вкладке можно получать важные уведомления.
    И если не ошибаюсь, для хрома можно написать расширение, работающее даже при закрытом окне браузера.
    • 0
      Расширение можно написать для любого браузера, но это требует больше времени ( написание под каждый браузер своего плагина ). Нужно замотивировать пользователя поставить плагин, и поставить его везде, где он использует браузер ( не все синхронизируют свои настройки браузера через учетку ). Плюс если вы это сделали, то какой профит от использования нативных уведомлений?
      • 0
        Ну у меня, например, так уведомления гуглопочты проверяются. Удобно.
        >какой профит от использования нативных уведомлений?
        не нужно писать свой велосипед, чем не профит?
        Для того, чтобы опрашивать сервер и показывать уведомления достаточно одной html'ки и скрипта на пару килобайт.
  • 0
    удалено
  • 0
    А что за браузер в вашей статье?
    • +1
      Firefox 22 beta
  • 0
    А их можно стилизовать? А то в Windows из-под Хрома, как по мне, они страшноватые.
    • 0
      Нет, это элементы интерфейса браузера.
    • 0
      Теоретически, исправив ресурсы браузера, можно.
  • +2
    Круто такое использовать в админках интернет-магазинов. Аля «новый заказ!»
    • –1
      Ага, лично я уже прикручиваю… =)
  • 0
    Следует упомянуть, что Chrome и Safari используют системные уведомления в OSX (Notification Center), поэтому не позволяют использовать кастомные иконки (показывается иконка приложения-инициатора, т.е. самого браузера). Сомневаюсь, что это изменится.
    У Firefox же своя имплементация, поэтому они показывают, что хотят. Но лишая, при этом, пользователя настроек показа в централизованном месте. Подозреваю, что это тоже не изменится.
    • +1
      В Chrome Canary сделали отдельный сервис для сообщений со своим центром уведомлений, выглядят практически как на скриншотах в статье. Так что скоро и в стабильной версии появятся.
      Центр нотификаций
      image
      • 0
        Ну в Safari это уж точно не изменится.
        Значит у Хрома та же песня про централизованною настройку. Хотя это и не так критично, особенно учитывая, что можно убивать уведомления свайпом, как и в случае с нативными.
        А где этот центр уведомлений в Canary? Настройки и флаги проверил, ничего не нашёл. У меня при появлении нового уведомления, старое уходит и появляется новое, нет списка и вообще всей этой менюшки в статус баре.
        • 0
          Да, просто так их оказывается нет. Я забыл, что как-то щелкал всё подряд во флагах. Надо в chrome://flags включить «Enable Rich Notifications» (в обычном хроме возможно тоже есть)
          • 0
            Дык, в том-то и дело, что все флаги, где есть слово Notification, уже были включены.
            Включил вот эти, после чего появилось (не знаю какой именно повлиял):
            Experimental Extension APIs
            Enable Panels
            Enable Experimental JavaScript
            Enable experimental WebKit features
            Enable Developer Tools experiments
            
      • 0
        del
      • 0
        Хм, видать, на счёт Safari я тоже ошибся kandutech.net
  • 0
    Ураааа, наконец то браузер становится нативным…
    в последней сборке хроме экпереминтально появилось новый стиль диалоговых окон. Возможно даже в будущем для браузеров появиться своебразный MFC. Между прочем AngularJS для это и создавался чтобы скрыть разницу между десктопом и вебем…
  • +2
    Не помешало бы еще вот об этом упомянуть (нашел здесь www.html5rocks.com/en/tutorials/notifications/quick/)
    However, it's very important to remember that the requestPermission method only works in event handlers triggered by a user action, like mouse or keyboard events, in order to avoid unsolicited infobars. In this case, the user action is the click on the button with id «show_button».

    Вобщем запрос разрешения произойдет только после какого-либо события. Например пользователь нажал на кнопку «разрешить системные уведомления».
    А то я минут 15 понять не мог. Почему у меня этот код Notification.requestPermission() из хромовой консоли — не срабатывает. А на сайте автора, все ОК.
  • +1
    Не прошло и года, как Firefox и Safari допилили этот API. Долго они, долго.
  • 0
    Жалко на планшете/мобильном в нативном браузере не поддерживается эта функция.
    Поставил Chrome на Андроиде, данная функция также не поддерживается.
  • –1
    Сейчас пременить то нельзя. Но на будущее, через пол-года — год, когда браузеры подтянутся к HTML5 API, можно будет использовать.
    Было бы удобно в мобильных приложениях использовать.
    • 0
      Очень оптимистично. Я думаю 2-3 месяца, так как firefox 22 в конце месяца выходит, Опера надеюсь в течении 2-3 месяцев будет.
  • 0
    Недостатки:
    Срабатывает при двух статусах.

    А если так?

    var notify = new Notification(«test»);
    notify.onerror = function(e){
    console.log(e.currentTarget.permission);
    };
  • –1
    На Mountain Lion картинка не отображается.
    • 0
      В каком браузере? Если Safari или Chrome, то это так и задумано, о чём сказано в статье.
  • +2
    На самом делеле с HTML 5 Notifications API не так все просто. Сейчас существует целых 3 реализации этого API со своими багами и интерфейсами:
    — Есть старая версия (webkitNotifications) в Safari 5 в которой нет обратного вызова у функции requestPermission (это ахтунг), а вместо свойства permission есть метод checkPermission(), который возвращает число-статус, а не строку.
    — Есть версия в Safari 6, в которой вместо свойства permission есть функция permissionLevel(), которая уже возвращает строку.
    — Есть какая-то сборка Safari или Chromium в которой Notification есть, а .prototype у него нет и, соответственно, при попытке вызова new Notification вы огребаете :)
    — Есть сборка Chromium в которой при попытке вызова new Notification вкладка крашится
    И наконце есть свежая сборка в которой метод cancel() переименовали в close(), а iconUrl в icon

    И весь этот зоопарк гулят по просторам интернета, хотя и быстро обновляется. Ну и чтобы не огребать советую вам использовать библиотеку $.notification, которая все это чинит. Демка
  • 0
    В хроме permission есть у объекта класса Notification
    var notify = new Notification("test"); alert(notify.permission); // default
  • 0
    уже работает на мобильных платформах
  • 0
    Как создавать такие же уведомления, но изнутри расширения?

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