Интерфейс Notification
из Notifications API используется для настройки и отображения уведомлений на рабочий стол пользователя.
Примечание:
Эта возможность доступна в Web Workers.Конструктор
Notification()
- Создает новый экземпляр объекта
Notification
.
Свойства
Собственные свойства
Следующие свойства доступны только для самого объекта Notification
.
Notification.permission
Только для чтения- Строка, показывающая текущие права доступа для отображения уведомлений. Возможные значения:
denied
- Пользователь отказался от отображения уведомлений.granted
- Пользователь дал согласие на отображение уведомлений.default
- Выбор пользователя неизвестен, и поэтому браузер будет действовать так, как если бы значение былоdenied
Свойства экземпляра
Следующие свойства доступны только для экземпляров объекта Notification
.
Notification.actions
Только для чтения- Массив действий уведомления, указывается в опциях как параметр конструктора.
Notification.badge
Только для чтения- URL изображения, используемого для отображения уведомления в случае, если недостаточно места для самого уведомления.
Notification.body
Только для чтения- Основное тело (текст) уведомления, указывается в опциях как параметр конструктора.
Notification.data
Только для чтения- Возвращает структурированную копию содержания уведомления.
Notification.dir
Только для чтения- Направление текста уведомления, указывается в опциях как параметр конструктора.
Notification.lang
Только для чтения- Код языка уведомления, указывается в опциях как параметр конструктора.
Notification.tag
Только для чтения- Инденцификатор (ID) уведомления, если есть, указывается в опциях как параметр конструктора.
Notification.icon
Только для чтения- URL изображения, используемого в качестве иконки уведомления, указывается в опциях как параметр конструктора.
Notification.image
Только для чтения- URL изображения, которое должно быть изображено в уведомлении, указывается в опциях как параметр конструктора.
Notification.renotify
Только для чтения- Определяет, должен ли пользователь снова быть уведомлен, если новое уведомление заменяет предыдущее.
Notification.requireInteraction
Только для чтения- Булево значение, отражающее, останется ли уведомление активным до тех пор, пока пользователь вручную не кликнет или не закроет его, в противоположность автоматическому закрытию со временем.
Notification.silent
Только для чтения- Указывает, должно ли уведомление не сопровождаться звуковым или вибро сигналом, независимо от настроек устройства.
Notification.timestamp
Только для чтения- Указывает время, в которое уведомление создано, либо применимо (в прошлом, настоящем или будущем).
Notification.title
Только для чтения- Заголовок уведомления, указывается в опциях как параметр конструктора.
Notification.vibrate
Только для чтения- Задает шаблон вибрации для устройств с вибро.
Не поддерживаемые свойства
Следующие свойства указаны в наиболее актуальной спецификации, но пока что не поддерживаются браузерами. Рекомендуем регулярно проверять актуальность этой информации, и если их статус изменится, пожалуйста, просим оповестить нас.
-
Notification.noscreen
Только для чтения - Определяет, должно ли срабатывание уведомления включать дисплей устройства или нет.
Notification.sticky
Только для чтения- Определяет, должно ли уведомление быть "липким", то есть не легко закрываемым.
Обработчики событий
Notification.onclick
- Обработчик события
click
. Срабатывает каждый раз, когда пользователь кликает по уведомлению. Notification.onerror
- Обработчик события
error
. Срабатывает каждый раз, когда уведомление сталкивается с ошибкой.
Устаревшие обработчики событий
Следующие обработчики событий все еще поддерживаются, как указано в разделе browser compatibility ниже, но более не входят в актуальную спецификацию. Небезосновательно можно предположить, что они устарели и могут перестать работать в будущих версиях браузеров.
Notification.onclose
- Обработчик события
close
. Срабатывает при закрытии уведомления пользователем. Notification.onshow
- Обработчик события
show
. Срабатывает при отображении уведомления. Notification.sound
Только для чтения- Определяет звуковой файл для воспроизведения при уведомлении, по умолчанию установлен системный звук.
Методы
Собственные методы
Следующие методы доступны только для самого объекта Notification
.
Notification.requestPermission()
- Запрашивает разрешение у пользователя показывать уведомления.
Методы экземпляра
Следующие методы доступны только для экземпляров объекта Notification
, либо через его прототип
. Объект Notification
также наследует методы интерфейса EventTarget
.
Notification.close()
- Программно закрывает уведомление.
Пример
Базовый HTML:
<button onclick="notifyMe()">Notify me!</button>
Отправить уведомление можно следующим образом — ниже представлен довольно подробный и полный набор кода, который вы могли бы использовать для того, чтобы сначала проверить поддержку уведомлений, затем проверить, позволено ли данному источнику отправлять уведомления, и наконец, запросив разрешение, если требуется, отправить уведомление.
function notifyMe() {
// Проверка поддержки браузером уведомлений
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// Проверка разрешения на отправку уведомлений
else if (Notification.permission === "granted") {
// Если разрешено, то создаем уведомление
var notification = new Notification("Hi there!");
}
// В противном случае, запрашиваем разрешение
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// Если пользователь разрешил, то создаем уведомление
if (permission === "granted") {
var notification = new Notification("Hi there!");
}
});
}
// В конечном счете, если пользователь отказался от получения
// уведомлений, то стоит уважать его выбор и не беспокоить его
// по этому поводу.
}
В большинстве случаев вам не надо быть столь многословными. Например в нашем демо Emogotchi (исходный код), мы просто запускаем Notification.requestPermission
несмотря ни на что, чтобы быть уверенными, что мы сможем получить разрешение на отправку уведомлений (тут используется синтаксис новейшего promise-based метода):
Notification.requestPermission().then(function(result) {
console.log(result);
});
Затем мы запускаем простую функцию spawnNotification()
, когда мы хотим вывести уведомление, передающую аргументы для указания тела, иконки и заголовка, которые нам нужны, а затем она создает необходимый объект параметров options
и запускает уведомление с помощью конструктора Notification()
.
function spawnNotification(body, icon, title) {
var options = {
body: body,
icon: icon
};
var n = new Notification(title, options);
}
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
Notifications API | Живой стандарт | Уровень жизни |
Совместимость с браузерами
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Базовая поддержка | 5webkit[1] 22 |
4.0 moz[2] 22 |
Нет | 25 | 6[3] |
icon |
5webkit[1] 22 |
4.0 moz[2] 22 |
Нет | 25 | Нет |
Available in workers | ? | 41.0 (41.0) | ? | ? | ? |
silent |
43.0 | Нет | Нет | Нет | Нет |
noscreen , renotify , sound , sticky |
Нет | Нет | Нет | Нет | Нет |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Базовая поддержка | ? |
(Да) |
4.0moz[2] 22 |
1.0.1moz[2] 1.2 |
Нет | ? | Нет |
(Да) |
icon |
? | (Да) | 4.0moz[2] 22 |
1.0.1moz[2] 1.2 |
Нет | ? | Нет | (Да) |
Available in workers | ? | ? | 41.0 (41.0) | ? | ? | ? | ? | ? |
silent |
Нет | 43.0 | Нет | Нет | Нет | Нет | Нет | 43.0 |
noscreen , renotify , sound , sticky |
Нет | Нет | Нет | Нет | Нет | Нет | Нет | Нет |
[1] Before Chrome 22, the support for notification followed an old prefixed version of the specification and used the navigator.webkitNotifications
object to instantiate a new notification.
До Chrome 32, Notification.permission
не поддерживается.
До Chrome 42, дополнения service worker не поддерживаются.
[2] Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification must be done with the navigator.mozNotification
object through its createNotification
method.
Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the show
method and supported only the click
and close
events.
Nick Desaulniers написал Notification shim, чтобы покрыть как новые так и старые реализации.
One particular Firefox OS issue is that you can pass a path to an icon to use in the notification, but if the app is packaged you cannot use a relative path like /my_icon.png
. You also can't use window.location.origin + "/my_icon.png"
because window.location.origin
is null in packaged apps. The manifest origin field fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS <1.1 is to pass an absolute URL to an externally hosted version of the icon. This is less than ideal as the notification is displayed immediately without the icon, then the icon is fetched, but it works on all versions of Firefox OS.
When using notifications in a Firefox OS app, be sure to add the desktop-notification
permission in your manifest file. Notifications can be used at any permission level, hosted or above: "permissions": { "desktop-notification": {} }
[3] Safari начали поддержку уведомлений с Safari 6, но только на Mac OSX 10.8+ (Mountain Lion).