Уведомление

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

The Notification интерфейс Notifications API используется для настройки и отображения уведомлений на рабочий стол пользователя.

Примечание: This feature is available in Web Workers.

Конструктор

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

Свойства

Собственные свойства

Свойства доступные только для объекта Notification.

Notification.permission Read only
Строка, показывающая текущие права доступа для отображения уведомлений. Возможные значения:
    denied (пользователь отказался от отображения уведомлений),
    granted (пользователь дал согласие на отображение уведомлений), 
    default (выбор пользователя неизвестен и поэтому браузер будет действовать так, как если бы значение было denied ).

Свойства экземпляра

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

Notification.title Read only
Заголовок уведомления, указывается в опциях как параметр конструктора.
Notification.dir Read only
Направление текста уведомления, указывается в опциях как параметр конструктора.
Notification.lang Read only
Код языка уведомления, указывается в опциях как параметр конструктора.
Notification.body Read only
Основное тело (текст) уведомления, указывается в опциях как параметр конструктора.
Notification.tag Read only
Инденцификатор (id) уведомления, указывается в опциях как параметр конструктора.
Notification.icon Read only
URL изображения уведомления, указывается в опциях как параметр конструктора.
Notification.data Read only
Возвращает копию информации уведомления.
Notification.requireInteraction Read only
Булево значение являющееся индентификатором того, что устройство с достаточно большим дисплеем и уведомление остается активным пока пользователь не кликнет на уведомление или закроет его. 
Notification.silent Read only
Указывает, должно ли уведомление сопровождаться со звуковым или вибро сигналом, не зависимо от настроек устройства.

Не поддерживаемые свойства

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

Notification.noscreen Read only
Определяет должен ли пользотельский дисплей включаться (если был выключен) при получении уведомления или нет
Notification.renotify Read only
Определяет должно ли новое пользовательское уведомление заменить предыдущее.
Notification.sound Read only
Определяет звуковой файл для воспроизведения при уведомлении, по умолчанию установлен системный звук.
Notification.sticky Read only
Определяет должно ли уведомление быть "sticky", то есть не легко закрываемым.
Notification.vibrate Read only
Задает шаблон вибрации для устройств с вибро .

Обработчики событий

Notification.onclick
Обработчик события click. Обрабатывается каждый раз как пользователь кликнет по уведомлению.
Notification.onerror
Обработчик события error. Обрабатывается каждый раз как появляется 

Устаревшие обработчики событий

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

Notification.onclose
Обработчик события close. Обрабатывается при попытке пользователя закрыть уведомление.
Notification.onshow
Обработчик события для show. Обрабатывается при отображении уведоления.

Методы

Собственные методы

Методы доступные только для объекта Notification.

Notification.requestPermission()
Requests permission from the user to display notifications.

Методы экземпляра

Это методы доступные только для экземпляра объекта 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!");
      }
    });
  }

  // В конечном счете если пользователь отказался от получения 
  // уведомлений, то стоит уважать его выбор и не беспокоить его 
  // по этому поводу .
}

In many cases, you don't need to be this verbose. For example, in our Emogotchi demo (see source code), we simply run Notification.requestPermission regardless to make sure we can get permission to send notifications:

Notification.requestPermission();

Then we run a simple spawnNotification() function when we want to fire a notification — this is passed arguments to specify the body, icon and title we want, then it creates the necessary options object and fires the notification using the Notification() constructor.

function spawnNotification(theBody,theIcon,theTitle) {
  var options = {
      body: theBody,
      icon: theIcon
  }
  var n = new Notification(theTitle,options);
}

Specifications

Specification Status Comment
Notifications API Рекомендация Living standard

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 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
Basic support ?

(Да)

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.

Before Chrome 32, Notification.permission was not supported.

Before Chrome 42, service worker additions were not supported.

[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 wrote a Notification shim to cover both newer and older implementations.

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 started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).

See also

Метки документа и участники

 Внесли вклад в эту страницу: 102, teoli, fsanano
 Обновлялась последний раз: 102,