Статьи

Веб-уведомления HTML5

Декабрь 14, 2017

Вы когда-нибудь хотели уведомлять клиентов / пользователей вашего сайта, пока они работают на вашем сайте? Уведомления типа «Пришло почтовое сообщение», «Принтер из бумаги» доступны через интеллектуальные клиенты в течение десятилетий, но в веб-приложениях их не так просто внедрить. В прошлом вы могли использовать мигающее поведение, при котором значок браузера будет мигать, или вы могли добавить всплывающее окно, которое будет раздражать ваших пользователей. Есть способы реализовать это поведение специфичным для браузера способом (например,
API Overlay Icon в IE9), но в HTML5 есть новая опция —
API веб-уведомлений . Этот API пока не является рекомендацией, поэтому в будущем все может измениться, и вы используете его на свой страх и риск.

Что такое API веб-уведомлений?

API веб-уведомлений — это механизм для создания простых уведомлений, которые будут предупреждать пользователей за пределами веб-страницы. Эти уведомления могут использоваться пассивно (уведомлять о новых твитах, событиях календаря и т. Д.) Или активно (при взаимодействии с пользователем), и они не привязаны к вкладке, которая имеет фокус. API ретранслирует разрешение, предоставленное пользователем. Без указания того, что пользователь запросил уведомления, механизм уведомлений не будет работать.

Предоставление разрешений

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

$('#btnGrantPermission').click(function () {
    if (window.Notifications.checkPermission() == 0) {
        createNotification();
    } else {
        window.Notifications.requestPermission();
    }
});

В этом примере я использую jQuery, чтобы связать событие click с кнопкой, которая проверит, есть ли у нас разрешение на использование уведомлений. Если есть разрешение, функция checkPermission вернет 0, и в примере я вызываю функцию createNotification. Если у нас нет разрешений, мы используем функцию requestPermission, чтобы запросить разрешение на использование уведомлений на веб-странице.

Обратите внимание, что requestPermission должен выполняться под обработчиком событий, который запускается пользователем!

Как использовать API веб-уведомлений?

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

function createNotification() {
    var notification = window.Notifications.createNotification("1.png", "New HTML5 Notification Received - Subject", "More Content...");
    notification.onshow = function () {
        setTimeout(notification.cancel(), 1500);
    }
    notification.show();
}

В этом примере я использую фабричную функцию createNotification для создания уведомления. Функция получает Uri для изображения, отображаемого в уведомлении, строку темы и строку содержимого. После этого я подключаю к событию onshow функцию setTimeout для отмены уведомления. Функция show, которая используется последней, будет отображать уведомление для пользователя. В спецификации вы также можете использовать объект Notification и создавать его экземпляры с теми же параметрами. 
CreateNotification происходит от реализации движка WebKit.

Полный пример

<!DOCTYPE html>
<html>
<head>
    <title>Notifications</title>    
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
    <div>
        <input id="btnGrantPermission" type="button" value="Grant Notification Permission" />
    </div>
    <script type="text/javascript">
        $(document).ready(function () {        
            if (window.webkitNotifications) {
                window.Notifications = window.webkitNotifications;
                $('#btnGrantPermission').click(function () {
                    if (window.Notifications.checkPermission() == 0) {
                        createNotification();
                    } else {
                       window.Notifications.requestPermission();
                    }
                });
            }            
        });        
 
        function createNotification() {
            var notification = window.Notifications.createNotification("1.png", "New HTML5 Notification Received - subject", "More Content...");
           notification.onshow = function () {
                setTimeout(notification.cancel(), 15000);
            }
            notification.show();
        }
    </script>
</body>
</html>

Несколько вещей, на которые стоит обратить внимание об образце:

  • Я удаляю префикс webkit, поскольку в спецификациях его не существует. Он будет опущен, когда в спецификации будут рекомендации (надеюсь…).
  • Образец будет работать только в браузерах, использующих движок webkit, таких как Google Chrome.
  • Я использую jQuery для добавления прослушивателя событий в событие click.

Вот уведомление, которое вы получите, когда будете использовать этот фрагмент кода:
уведомление

Резюме

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

35
Share: