PUSH-уведомления на сайте.

Пришлось по работе встроить на одном проекте такую возможность, которую многие из вас наверняка не любят — PUSH-уведомления, которые постоянно запрашивают разрешение на показ и если вы сдуру согласились, будут клеймить ваш браузер своими обновлениями. Выглядит это как-то так:

push-notification
пример push-уведомления

Такой тип уведомлений существует с 2015 года и поддерживается, как проверено на личном опыте, в следующих браузерах: Safari, Chrome, Opera, Firefox, последней версии. Реализованы они на API HTML 5, обработчик написан на js. Сайт заказчика крутился на bitrix, поэтому адаптация кода выполнена к нему.

Текст и изображение для уведомления берутся из нового инфоблока.

Код:

<?php
    $arSelect = Array("ID", "IBLOCK_ID", "NAME", "DATE_ACTIVE_FROM", "ACTIVE", "PREVIEW_PICTURE", "PROPERTY_*"); //массив результатов
    $arFilter = Array("IBLOCK_ID" => ID_ИНФОБЛОКА); //массив-фильтр для выборки
    $res = CIBlockElement::GetList(Array(), $arFilter, false, false, $arSelect); //выполняем GetList, получая заполненный массив arSelect
    $arFields = array();
    $arProps = array();
    while ($ob = $res->GetNextElement()) {
        $arFields = $ob->GetFields(); //Заполняем все поля
        $arProps = $ob->GetProperties(); //И все пользовательские свойства (в нашем случае это поле типа String, куда записывается время в минутах
    }
    if ($arFields["ACTIVE"] != 'N') { //Проверка на активность. Если неактивно - то не выводим.
        ?>

        <script type="text/javascript">
            switch (Notification.permission.toLowerCase()) {
                case "granted": // пользователь указал "Разрешить". Значит выводим ему уведомления, таймер на N минут
                {
                    var obj = <?echo $arProps["ATR_TIME"]["VALUE"]?> *
                    60; //ATR_TIME - код свойства "Время". Указывается в минутах, поэтому переводим в секунды
                    function timer() {
                        obj--; //каждый вызов функции: минус секунда
                        if (obj == 0) { //
                            var mailNotification = new Notification("<?echo $arProps["ATR_FROM"]["VALUE"]?>", //Свойство "От кого"
                                {
                                    tag: "teg",
                                    body: "<?echo $arFields["NAME"]?>", //свойство, отвечающее за надпись
                                    icon: "<?echo CFile::GetPath($arFields["PREVIEW_PICTURE"])?>" //изображение
                                }
                            )
                            mailNotification.onclick = function (event) { // по событию OnClick будем переходить по ссылке
                                event.preventDefault(); // сбросили настройки браузера
                                window.open('<?=$arProps["ATR_LINK"]["VALUE"]?>'); //ссылка, куда переходим
                            }
                            setTimeout(function () {
                            }, 1000);
                        } else {
                            setTimeout(timer, 1000);
                        }
                    }

                    setTimeout(timer, 1000);
                    break;
                }
                case "denied":// пользователь указал "Не разрешать". Не выводим уведомление.
                    break;
                case "default":// пользователь первый раз открыл наш сайт, спрашиваем, разрешать или запретить.
                {
                    var permission,
                        timer = setTimeout(function () {
                            permission = "default"
                        }, 500);
                    Notification.requestPermission(function (state) {
                        clearTimeout(timer);
                        permission = state
                    });
                    break;
                }
            }

        </script>
        <?php
} ?>

 

mailNotification — объект типа Notification, имеющий 3 состояния, которые можно видеть выше в блоке switch, и имеющий 4 метода:

  1. OnClick — тут указываем, что выполнить при клике на уведомление. В моём примере мы переходили на страницу.
  2. OnShow — действие, которое будет выполнено при показе  уведомления.
  3. OnError — действие при ошибке.
  4. OnClose — тут понятно, закрываем уведомление при клике на него.

Подробный мануал на русском есть, например, на сайте mozilla: https://developer.mozilla.org/ru/docs/Web/API/Notification — огромный перечень свойств, подробное описание методов и примеры к ним.

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *