Введение
API уведомлений позволяет отображать пользователю уведомления о заданных событиях, как пассивно (новые электронные письма, твиты или события календаря), так и при взаимодействии пользователя, независимо от того, какая вкладка находится в фокусе. Существует черновой вариант спецификации , но в настоящее время он не включен ни в один стандарт.
Вы можете выполнить эти простые шаги, чтобы внедрить уведомления всего за несколько минут:
Шаг 1: Проверьте наличие поддержки API уведомлений.
Мы проверяем, поддерживается ли webkitNotifications . Обратите внимание, что название webkitNotifications выбрано потому, что это часть чернового варианта спецификации. В окончательной версии спецификации вместо этого будет использоваться функция notifications().
// check for notifications support
// you can omit the 'window' keyword
if (window.webkitNotifications) {
console.log("Notifications are supported!");
}
else {
console.log("Notifications are not supported for this Browser/OS version yet.");
}
Шаг 2: Предоставьте пользователю разрешение веб-сайту на отображение уведомлений.
Любой из упомянутых нами конструкторов вызовет ошибку безопасности, если пользователь вручную не предоставил веб-сайту разрешения на отображение уведомлений. Для обработки исключения можно использовать блок try-catch, но также можно использовать метод checkPermission для той же цели.
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
} else {
window.webkitNotifications.requestPermission();
}
}, false);
Если у веб-приложения нет разрешений на отображение уведомлений, то метод requestPermission отобразит информационную панель:
Однако очень важно помнить, что метод requestPermission работает только в обработчиках событий, запускаемых действием пользователя, например, событиями мыши или клавиатуры, чтобы избежать нежелательных информационных панелей. В данном случае действием пользователя является щелчок по кнопке с идентификатором "show_button". Приведенный выше фрагмент кода никогда не будет работать, если пользователь явно не щелкнул по кнопке или ссылке, которая запускает метод requestPermission .
Шаг 3: Прикрепите слушателей и другие действия.
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
notification_test = window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
notification_test.ondisplay = function() { ... do something ... };
notification_test.onclose = function() { ... do something else ... };
notification_test.show();
} else {
window.webkitNotifications.requestPermission();
}
}, false);
На этом этапе вы можете захотеть инкапсулировать все эти события и действия, создав собственный класс Notification, чтобы сделать код чище, хотя это выходит за рамки данного руководства.