Отображение уведомлений на рабочем столе с помощью JavaScript

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

Эти сообщения (также называемые системными или десктопными уведомлениями) можно использовать для уведомления пользователя о важных событиях, таких как электронное письмо, новое сообщение в социальных сетях, уведомление в чате, напоминания календаря. и т. д. Вы даже можете использовать системные уведомления для отправки маркетинговых кампаний.

В этом руководстве я объясню основное использование Notifications API для отображения сообщений пользователю, когда сайт открыт на вкладке браузера.

Использование API

Notifications API довольно новый и может не работать в старых браузерах. Поэтому вы должны явно проверить, поддерживается ли API браузером или нет, прежде чем показывать сообщение. Вы можете сделать это, проверив, есть ли у окна свойство с именем Notification:

if(!window.Notification) {
    console.log('Browser does not support notifications.');
} else {
    // display message here
}

На поддерживаемых платформах для отображения уведомления на рабочем столе необходимо запросить разрешение и создать новое уведомление для отображения пользователю.

:::информация Примечание. API уведомлений требует, чтобы ваш веб-сайт использовал сертификат SSL. Он не работает с незащищенными источниками (HTTP).

:::

Запрос разрешения

Пользователь должен предоставить текущему источнику разрешение на отображение уведомлений на рабочем столе. Вы можете легко проверить, было ли пользователю уже предоставлено разрешение на отображение системных уведомлений, используя свойство Notification.permission. Это свойство имеет следующие возможные значения:

* default — Пользователь еще не решил принимать уведомления с вашего сайта. * granted — пользователь разрешил вашему сайту отображать уведомления * denied — пользователь решил заблокировать уведомления с вашего сайта

В первом случае вы можете запросить разрешение у пользователя с помощью requestPermission() API уведомлений. Откроется диалоговое окно с просьбой разрешить или заблокировать уведомления с этого сайта. Как только пользователь сделает выбор, настройка будет сохранена для текущего сеанса.

Если пользователь уже отклонил запрос на показ уведомлений, мы ничего не можем сделать. Браузер проигнорирует любой запрос на отображение уведомления или повторный запрос разрешения.

if (!window.Notification) {
    console.log('Browser does not support notifications.');
} else {
    // check if permission is already granted
    if (Notification.permission === 'granted') {
        // show notification here
    } else {
        // request permission from user
        Notification.requestPermission().then(function(p) {
           if(p === 'granted') {
               // show notification here
           } else {
               console.log('User blocked notifications.');
           }
        }).catch(function(err) {
            console.error(err);
        });
    }
}

requestPermission() возвращает обещание. Функция обратного вызова будет вызвана после того, как обещание будет разрешено или отклонено (по выбору пользователя).

Отображение уведомления

Если пользователь решил принимать уведомления с нашего сайта, вы можете создать новое уведомление на рабочем столе, используя Notification(), чтобы показать его пользователю. Просто передайте заголовок конструктору, чтобы создать новое уведомление.

var notify = new Notification('Hi there!');

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

var notify = new Notification('Hi there!', {
    body: 'How are you doing?',
    icon: 'https://bit.ly/2DYqRrh',
});

Собрав все вместе, мы можем создать функцию, которая будет отображать уведомление на рабочем столе после вызова, запрашивая разрешение, если оно еще не предоставлено:

function notifyMe() {
    if (!window.Notification) {
        console.log('Browser does not support notifications.');
    } else {
        // check if permission is already granted
        if (Notification.permission === 'granted') {
            // show notification here
            var notify = new Notification('Hi there!', {
                body: 'How are you doing?',
                icon: 'https://bit.ly/2DYqRrh',
            });
        } else {
            // request permission from user
            Notification.requestPermission().then(function (p) {
                if (p === 'granted') {
                    // show notification here
                    var notify = new Notification('Hi there!', {
                        body: 'How are you doing?',
                        icon: 'https://bit.ly/2DYqRrh',
                    });
                } else {
                    console.log('User blocked notifications.');
                }
            }).catch(function (err) {
                console.error(err);
            });
        }
    }
}

Теперь мы можем вызывать указанную выше функцию, когда пользователь нажимает кнопку:

<button onclick="notifyMe()">Notify Me</button>

Кроме того, вы можете привязать вышеуказанную функцию к событию onload, которое будет вызываться после полной загрузки веб-страницы:

<!DOCTYPE html>
<html>
<body onload="notifyMe()">
<!-- body content-->
</body>
</html>

✌️ Я пишу о современном JavaScript, Node.js, Spring Boot и веб-разработке. Подпишитесь на мою рассылку, чтобы получать руководства по веб-разработке и amp; советы каждую неделю.

Также опубликовано здесь.