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: правой кнопкной мыши на странице — информация о странице — разрешения — отображать уведомления.

    Ссылка для визуального восприятия информации
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 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
                                        А что за браузер в вашей статье?
                                      • 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
                                                                        Как создавать такие же уведомления, но изнутри расширения?

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