Уведомление

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Интерфейс 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:

html
<button onclick="notifyMe()">Notify me!</button>

Отправить уведомление можно следующим образом — ниже представлен довольно подробный и полный набор кода, который вы могли бы использовать для того, чтобы сначала проверить поддержку уведомлений, затем проверить, позволено ли данному источнику отправлять уведомления, и наконец, запросив разрешение, если требуется, отправить уведомление.

js
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 метода):

js
Notification.requestPermission().then(function (result) {
  console.log(result);
});

Затем мы запускаем простую функцию spawnNotification(), когда мы хотим вывести уведомление, передающую аргументы для указания тела, иконки и заголовка, которые нам нужны, а затем она создаёт необходимый объект параметров options и запускает уведомление с помощью конструктора Notification().

js
function spawnNotification(body, icon, title) {
  var options = {
    body: body,
    icon: icon,
  };
  var n = new Notification(title, options);
}

Спецификации

Specification
Notifications API
# api

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Notification
Notification() constructor
actions
Experimental
badge
body
click event
close
close event
data
dir
error event
icon
image
Experimental
lang
maxActions static property
Experimental
permission static property
renotify
Experimental
requestPermission() static method
Returns a Promise
requireInteraction
Secure context required
show event
silent
tag
timestamp
Experimental
title
vibrate
Experimental
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Смотрите также