Notify.js

С помощью Notify js вы можете:

• Создание уведомлений с помощью заголовков, текстов, иконок и обработчиков событий.
• Позиционирование уведомлений относительно других элементов или глобально на странице.
• Настраиваемые стили уведомлений, например, для bootstrap.
• Автоматическое закрытие уведомления после указанного таймаута.
• Возможность добавлять собственные стили CSS.

Установка Notify.js

Установите с помощью npm npm install notifyjs
Примечание: при установке через npm исходный файл Notify. js находится по адресу ./dist/notify.js Notify.js написан на ES6 и преобразован в формат ES5 и UMD с помощью Babel и Rollup. Установка зависимостей: npm install Затем создайте из исходного кода: npm run build

Использование Notify.js

Чтобы инициализировать веб-уведомление, создайте новый Notify экземпляр, передав ему сообщение title, а также любые другие параметры, которые вы хотите использовать.

var myNotification = new Notify('Yo dawg!', {
    body: 'This is an awesome notification',
    notifyShow: onNotifyShow
});

function onNotifyShow() {
    console.log('notification was shown!');
}

Затем покажите уведомление.

myNotification.show();

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

if (!Notify.needsPermission) {
    doNotification();
} else if (Notify.isSupported()) {
    Notify.requestPermission(onPermissionGranted, onPermissionDenied);
}

function onPermissionGranted() {
    console.log('Permission has been granted by the user');
    doNotification();
}

function onPermissionDenied() {
    console.warn('Permission has been denied by the user');
}

Дополнительные параметры

Все опции, поддерживаемые в спецификации API уведомлений, в дополнение к:

• timeout: (целое число) — количество секунд до автоматического закрытия уведомления
• closeOnClick: (логическое значение) — закрывает уведомление при нажатии. Полезно в Chrome, где уведомление остаётся открытым до истечения времени ожидания или до нажатия на крестик.
• notifyShow: (функция) — обратный вызов при отображении уведомления
• notifyClose: (функция) — обратный вызов при закрытии уведомления
• notifyClick: (функция) — обратный вызов при нажатии на уведомление
• notifyError: (функция) — обратный вызов при возникновении ошибки в уведомлении

Статические методы и свойства

• Notify.requestPermission(onPermissionGrantedCallback, onPermissionDeniedCallback) — при необходимости запрашивает разрешение у пользователя и обрабатывает обратные вызовы разрешения.
• Notify.isSupported — Функция для проверки поддержки браузером Web Notifications API
• Notify.needsPermission — Логическое свойство для проверки того, требуется ли пользователю разрешение на получение уведомлений.

Методы

• Notify.show — Функция для отображения экземпляра Notify
• Notify.close — Функция для закрытия экземпляра Notify