API уведомлений позволяет отображать всплывающие окна как нативные уведомления на рабочем столе или на экране мобильного телефона. Функциональность варьируется от платформы к платформе, но, как правило, обеспечивает асинхронное предоставление информации пользователю.
Создание нового уведомления
Новые уведомления создаются с помощью конструктора Notification. Он принимает 2 аргумента: первый — это заголовок, второй (необязательный) — это объект с различными свойствами:
dir: место отображения уведомления. По умолчаниюauto, но могут использоватьсяrtlдля расположения справа иltrдля расположения слева.lang: строковое значение для языка — языковые тэги BCP 47.badge: строка, содержащая URL изображения, использованного для представления уведомления, если на экране для него недостаточно места.body: строка с текстом уведомления.tag: строка с тэгом-идентификатором уведомления.icon: URL-строка с URL значка.image: URL-строка для отображаемой картинки.data: данные, которые мы хотим связать с уведомлением.vibrate: настройки вибрации для устройств с поддержкой этой функции.renotify: логическое значение, определяющее, следует ли уведомлять пользователя после того, как новое уведомление заменит старое. По умолчанию значениеfalse.requireInteraction: отображает, должно ли уведомление оставаться активным, пока пользователь не кликнет на него или не отклонит его. По умолчанию значениеfalse.actions: массивNotificationAction, содержащий действия, доступные пользователю при отображении уведомления. Это объект со свойствамиname,titleиicon.
Простое уведомление выглядит следующим образом:
const options = {
body: "body",
icon:
"https://www.iconninja.com/files/926/373/306/link-chain-url-web-permalink-web-address-icon.png"
};
const n = new Notification("title", options);Notification нужно настроить так, чтобы уведомления всегда отображались в браузере, тогда мы сможем увидеть созданное уведомление. Мы увидим текст и значок, заданный в свойстве icon.
Методы объекта Notification
Запрос разрешения
Мы можем запросить разрешение статичным методом requestPermission. Он возвращает промис, который решает, разрешен ли показ уведомления. Решение принимается с объектом, имеющим данные разрешения.
При запуске этого метода браузер спросит разрешения на отображение уведомлений для домена.
Например:
(async () => {
try {
const permission = await Notification.requestPermission();
console.log(permission);
const options = {
body: "body",
icon:
"https://www.iconninja.com/files/926/373/306/link-chain-url-web-permalink-web-address-icon.png"
};
const n = new Notification("title", options);
} catch (error) {
console.log(error);
}
})();Если получено разрешение, console.log в блоке try запишет granted. В обратном случае он запишет denied из console.log в блоке catch.
Закрытие уведомления программным путем
Мы можем закрыть уведомление программным методом close — методом экземпляра объекта Notification.
Например:
(async () => {
try {
const permission = await Notification.requestPermission();
console.log(permission);
const options = {
body: "body",
icon:
"https://www.iconninja.com/files/926/373/306/link-chain-url-web-permalink-web-address-icon.png"
};
const n = new Notification("title", options);
await new Promise(resolve => {
setTimeout(() => {
n.close();
resolve();
}, 5000);
});
} catch (error) {
console.log(error);
}
})();В примере выше мы вызвали close внутри обратного вызова метода setTimeout. Уведомление закроется автоматически через 5 секунд.
Обработчики событий
У объектов Notification также есть собственные обработчики событий: onclick, onclose, onerror и onshow. Им можно назначать собственные функции.
onclick
Мы можем назначить обработчик событий свойству onclick, если хотим сделать что-то при нажатии на уведомление. Например:
(async () => {
try {
const permission = await Notification.requestPermission();
console.log(permission);
const options = {
body: "body",
icon:
"https://www.iconninja.com/files/926/373/306/link-chain-url-web-permalink-web-address-icon.png"
};
const n = new Notification("title", options);
n.onclick = () => {
alert("Notification clicked");
};
} catch (error) {
console.log(error);
}
})();При нажатии на уведомление во вкладке браузера будет показано предупреждение. Этот обработчик событий принимает один параметр — объект события.
Поведение по умолчанию заключается в перемещении фокуса в область просмотра контекста, связанного с уведомлением. Чтобы предотвратить это, вызовем preventDefault() в передаваемом параметре event:
(async () => {
try {
const permission = await Notification.requestPermission();
console.log(permission);
const options = {
body: "body",
icon:
"https://www.iconninja.com/files/926/373/306/link-chain-url-web-permalink-web-address-icon.png"
};
const n = new Notification("title", options);
n.onclick = event => {
event.preventDefault();
alert("Notification clicked");
};
} catch (error) {
console.log(error);
}
})();Назначив функцию обработчика событий свойству onclose, можно заставить уведомление делать что-то, когда оно закрыто.
То же самое можно сделать для свойства onerror для обработки ошибок и для свойства onshow для обработки события show, которое выполняется при отображении уведомления.
Вывод
Notification API — действительно простой способ отображения нативных уведомлений веб-приложений. Разрешение на отображение уведомлений запрашивается статичным методом Notification.requestPermission. Как только промис разрешается, если пользователь принимает отображение уведомлений, мы просто создаем объект Notification с необходимыми настройками. Готово, уведомления будут отображаться.
Читайте также:
- Создание тестового фреймворка JavaScript
- Лучшие практики JavaScript — производительность
- Лучшие практики JavaScript: переменные
Перевод статьи John Au-Yeung: Use the JavaScript Notification API to Display Native Popups
