Уведомление

Интерфейс Notification API уведомлений используется для настройки и отображения настольных уведомлений пользователю.

Внешний вид и определённые функции этих уведомлений различаются на разных платформах, но в общем случае они обеспечивают асинхронный способ предоставления информации пользователю.

Notification()

Создаёт новый экземпляр объекта Notification.

Также наследует свойства от своего родительского интерфейса, EventTarget.

Notification.permission Только для чтения

Строка, представляющая текущее разрешение на отображение уведомлений. Возможные значения:

• denied — Пользователь запретил отображение уведомлений.
• granted — Пользователь разрешил отображение уведомлений.
• default — Выбор пользователя неизвестен, и поэтому браузер будет действовать так, как если бы значение было запрещено.

Notification.maxActions Только для чтения Экспериментальная

Максимальное количество действий, поддерживаемых устройством и пользовательским агентом.

Также наследует свойства от своего родительского интерфейса, EventTarget.

Notification.actions Только для чтения Экспериментальная

Массив действий уведомления, как указано в параметре options конструктора.

Notification.badge Только для чтения

Строка, содержащая URL изображения, представляющего уведомление, когда нет места для отображения самого уведомления, например, в строке уведомлений Android. На устройствах Android значок должен подходить для устройств с разрешением до 4x, примерно 96 на 96 пикселей, и изображение будет автоматически замаскировано.

Notification.body Только для чтения

Строка тела уведомления, как указано в параметре options конструктора.

Notification.data Только для чтения

Возвращает структурированную копию данных уведомления.

Notification.dir Только для чтения

Направление текста уведомления, как указано в параметре options конструктора.

Notification.icon Только для чтения

URL изображения, используемого в качестве значка уведомления, как указано в параметре options конструктора.

Notification.image Только для чтения Экспериментальная

URL изображения, которое будет отображено как часть уведомления, как указано в параметре options конструктора.

Notification.lang Только для чтения

Код языка уведомления, как указано в параметре options конструктора.

Notification.renotify Только для чтения Экспериментальная

Указывает, следует ли уведомлять пользователя после того, как новое уведомление заменит старое.

Notification.requireInteraction Только для чтения

Логическое значение, указывающее, что уведомление должно оставаться активным до тех пор, пока пользователь не нажмёт на него или не закроет его, а не закрываться автоматически.

Notification.silent Только для чтения

Указывает, должно ли уведомление быть беззвучным — то есть, не должны издаваться звуки или вибрации независимо от настроек устройства.

Notification.tag Только для чтения

Идентификатор уведомления (если есть), как указано в параметре options конструктора.

Notification.timestamp Только для чтения Экспериментальная

Указывает время создания или применимости уведомления (прошлое, настоящее или будущее).

Notification.title Только для чтения

Заголовок уведомления, как указано в первом параметре конструктора.

Notification.vibrate Только для чтения Экспериментальная

Указывает шаблон вибрации для устройств с вибромодулем.

Также наследует методы от своего родительского интерфейса, EventTarget.

Notification.requestPermission()

Запрашивает разрешение у пользователя на отображение уведомлений.

Также наследует методы от своего родительского интерфейса, EventTarget.

Notification.close()

Программно закрывает экземпляр уведомления.

Также наследует события от своего родительского интерфейса, EventTarget.

click

Срабатывает, когда пользователь нажимает на уведомление.

close

Срабатывает, когда пользователь закрывает уведомление.

error

Срабатывает, когда у уведомления возникает ошибка.

show

Срабатывает, когда уведомление отображается.

Предположим этот базовый HTML:

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

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

function notifyMe() {
  if (!("Notification" in window)) {
    // Check if the browser supports notifications
    alert("This browser does not support desktop notification");
  } else if (Notification.permission === "granted") {
    // Check whether notification permissions have already been granted;
    // if so, create a notification
    const notification = new Notification("Hi there!");
    // …
  } else if (Notification.permission !== "denied") {
    // We need to ask the user for permission
    Notification.requestPermission().then((permission) => {
      // If the user accepts, let's create a notification
      if (permission === "granted") {
        const notification = new Notification("Hi there!");
        // …
      }
    });
  }

  // At last, if the user has denied notifications, and you
  // want to be respectful there is no need to bother them anymore.
}

Мы больше не отображаем демонстрационный пример на этой странице, так как Chrome и Firefox больше не позволяют запрашивать разрешения на уведомления из кросс-доменных <iframe>, а другие браузеры последуют этому примеру. Чтобы увидеть пример в действии, ознакомьтесь с нашим примером списка задач (также см. приложение, работающее в режиме реального времени).

• Использование API уведомлений