Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

Уведомления javascript

Уведомления  javascript

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

И для того чтобы нам начать работать с уведомлениями нужно сделать следующую проверку:

if(window.Notification && Notification.permission !== "denied") {
	console.log('Да, уведомления будут работать в нашем браузере');
}else{
	console.log('Уведомления не работают в браузере, возможно они просто запрещены в настройках');
}

Как видите за работу с уведомлениями отвечает объект Notification.

Тут вы должны понимать что не все браузеры поддерживают данную технологию. Уведомления могут быть запрещены в настройках браузера. Также проблема может возникнуть из-за протокола http.

Если все прошло успешно и уведомления по условию будут работать в вашем браузере, то идем далее.

Следующий шаг на пути генерации уведомлений, это получение разрешения от пользователя на размещение уведомлений в браузере. Это делается через метод requestPermission() объекта Notification

Notification.requestPermission(function(status) {  

}

Данное условие обязательно, так как если оно не выполняется, уведомления работать не будут. Выполняться оно будет после того как пользователь разрешить получать уведомления на данном домене, то есть нашем сайте или странице. Разрешение у пользователя запрашивается только один раз, и результат его решения записывается в браузер.

И последний штрих, это генерация самого уведомления.

var n = new Notification('Оповещение', {
    body: 'Добро пожаловать!',
    icon: '/image.jpg'
});

Создается уведомление через объект класса Notification() в качестве аргумента которого передаются два параметра, заголовок уведомления и объект со свойствами тела(сообщения уведомления) и иконки(пути к картинке).

Общий код будет выглядеть так:

if(window.Notification && Notification.permission !== "denied") {
    console.log('cds');
    Notification.requestPermission(function(status) {
        var n = new Notification('Оповещение', {
            body: 'Добро пожаловать!',
            icon: '/image.jpg'
        });
    });
}

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

Для того чтобы скрыть уведомление нам достаточно по нему щелкнуть по его крестику или воспользоваться методом close();

n.close();

где в переменная n является объектом класса Notification. Пример:

if(window.Notification && Notification.permission !== "denied") {
    console.log('cds');
    Notification.requestPermission(function(status) {
        var n = new Notification('Оповещение', {
            body: 'Добро пожаловать!',
            icon: '/image.jpg'
        });
        setTimeout(function(){
            n.close();
        },10000);
    });
}

Здесь через десять секунд после всплытия, уведомление исчезнет.

На этом данная статья подошла к концу. Надеюсь она для вас была полезна.

Желаю вам успехов и удачи! Пока!

Оцените статью:

Статьи

Комментарии

Внимание!!! Комментарий теперь перед публикацией проходит модерацию

Все комментарии отправлены на модерацию

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm