---
title: Уведомление
slug: Web/API/notification
translation_of: Web/API/Notification
---
<p> </p>

<p>{{APIRef("Web Notifications")}}</p>

<p>Интерфейс <code>Notification</code> из <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> используется для настройки и отображения уведомлений на рабочий стол пользователя.</p>

<p>{{AvailableInWorkers}}</p>

<h2 id="Конструктор">Конструктор</h2>

<dl>
 <dt>{{domxref("Notification.Notification", "Notification()")}}</dt>
 <dd>Создаёт новый экземпляр объекта <code>Notification</code>.</dd>
</dl>

<h2 id="Свойства">Свойства</h2>

<h3 id="Собственные_свойства">Собственные свойства</h3>

<p>Следующие свойства доступны только для самого объекта <code>Notification</code>.</p>

<dl>
 <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
 <dd>Строка, показывающая текущие права доступа для отображения уведомлений. Возможные значения:</dd>
</dl>

<ul>
 <li><code>denied</code> - Пользователь отказался от отображения уведомлений.</li>
 <li><code>granted</code> - Пользователь дал согласие на отображение уведомлений.</li>
 <li><code>default</code> - Выбор пользователя неизвестен, и поэтому браузер будет действовать так, как если бы значение было <code>denied</code></li>
</ul>

<h3 id="Свойства_экземпляра">Свойства экземпляра</h3>

<p>Следующие свойства доступны только для экземпляров объекта <code>Notification</code>.</p>

<dl>
 <dt>{{domxref("Notification.actions")}} {{readonlyinline}}</dt>
 <dd>Массив действий уведомления, указывается в опциях как параметр конструктора.</dd>
 <dt>{{domxref("Notification.badge")}} {{readonlyinline}}</dt>
 <dd>URL изображения, используемого для отображения уведомления в случае, если недостаточно места для самого уведомления.</dd>
 <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt>
 <dd>Основное тело (текст) уведомления, указывается в опциях как параметр конструктора.</dd>
 <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt>
 <dd>Возвращает структурированную копию содержания уведомления.</dd>
 <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt>
 <dd>Направление текста уведомления, указывается в опциях как параметр конструктора.</dd>
 <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt>
 <dd>Код языка уведомления, указывается в опциях как параметр конструктора.</dd>
 <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt>
 <dd>Идентификатор (ID) уведомления, если есть, указывается в опциях как параметр конструктора.</dd>
 <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt>
 <dd>URL изображения, используемого в качестве иконки уведомления, указывается в опциях как параметр конструктора.</dd>
 <dt>{{domxref("Notification.image")}} {{readonlyinline}}</dt>
 <dd>URL изображения, которое должно быть изображено в уведомлении, указывается в опциях как параметр конструктора.</dd>
 <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt>
 <dd>Определяет, должен ли пользователь снова быть уведомлен, если новое уведомление заменяет предыдущее.</dd>
</dl>

<p> </p>

<dl>
 <dt>{{domxref("Notification.requireInteraction")}} {{readonlyinline}}</dt>
 <dd><a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Boolean">Булево значение</a>, отражающее, останется ли уведомление активным до тех пор, пока пользователь вручную не кликнет или не закроет его, в противоположность автоматическому закрытию со временем. </dd>
 <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt>
 <dd>Указывает, должно ли уведомление не сопровождаться звуковым или вибро сигналом, независимо от настроек устройства.</dd>
</dl>

<p> </p>

<dl>
 <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt>
 <dd>Указывает время, в которое уведомление создано, либо применимо (в прошлом, настоящем или будущем).</dd>
 <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt>
 <dd>Заголовок уведомления, указывается в опциях как параметр конструктора.</dd>
 <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
 <dd>Задаёт шаблон вибрации для устройств с вибро.</dd>
</dl>

<h4 id="Не_поддерживаемые_свойства">Не поддерживаемые свойства</h4>

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

<dl>
 <dt>
 <p>{{domxref("Notification.noscreen")}} {{readonlyinline}}</p>
 </dt>
 <dd>Определяет, должно ли срабатывание уведомления включать дисплей устройства или нет.</dd>
 <dt>{{domxref("Notification.sticky")}} {{readonlyinline}}</dt>
 <dd>Определяет, должно ли уведомление быть "липким", то есть не легко закрываемым.</dd>
</dl>

<h4 id="Обработчики_событий">Обработчики событий</h4>

<dl>
 <dt>{{domxref("Notification.onclick")}}</dt>
 <dd>Обработчик события {{event("click")}}. Срабатывает каждый раз, когда пользователь кликает по уведомлению.</dd>
 <dt>{{domxref("Notification.onerror")}}</dt>
 <dd>Обработчик события {{event("error")}}. Срабатывает каждый раз, когда уведомление сталкивается с ошибкой. </dd>
</dl>

<h4 id="Устаревшие_обработчики_событий">Устаревшие обработчики событий</h4>

<p>Следующие обработчики событий все ещё поддерживаются, как указано в разделе {{anch("browser compatibility")}} ниже, но более не входят в актуальную спецификацию. Небезосновательно можно предположить, что они устарели и могут перестать работать в будущих версиях браузеров.</p>

<dl>
 <dt>{{domxref("Notification.onclose")}}</dt>
 <dd>Обработчик события {{event("close")}}. Срабатывает при закрытии уведомления пользователем.</dd>
 <dt>{{domxref("Notification.onshow")}}</dt>
 <dd>Обработчик события {{event("show")}}. Срабатывает при отображении уведомления.</dd>
 <dt>{{domxref("Notification.sound")}} {{readonlyinline}}</dt>
 <dd>Определяет звуковой файл для воспроизведения при уведомлении, по умолчанию установлен системный звук.</dd>
</dl>

<h2 id="Методы">Методы</h2>

<h3 id="Собственные_методы">Собственные методы</h3>

<p>Следующие методы доступны только для самого объекта <code>Notification</code>.</p>

<dl>
 <dt>{{domxref("Notification.requestPermission()")}}</dt>
 <dd>Запрашивает разрешение у пользователя показывать уведомления.</dd>
</dl>

<h3 id="Методы_экземпляра">Методы экземпляра</h3>

<p>Следующие методы доступны только для экземпляров объекта <code>Notification</code>, либо через его <code><a href="/ru/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">прототип</a></code>. Объект <code>Notification</code> также наследует методы интерфейса {{domxref("EventTarget")}}.</p>

<dl>
 <dt>{{domxref("Notification.close()")}}</dt>
 <dd>Программно закрывает уведомление.</dd>
</dl>

<h2 id="Пример">Пример</h2>

<p>Базовый HTML:</p>

<pre class="brush: html">&lt;button onclick="notifyMe()"&gt;Notify me!&lt;/button&gt;</pre>

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

<pre class="brush: 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!");
      }
    });
  }

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

<p>{{EmbedLiveSample('%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80', '100%', 30)}}</p>

<p>В большинстве случаев вам не надо быть столь многословными. Например в нашем <a href="http://mdn.github.io/emogotchi/">демо Emogotchi</a> (<a href="https://github.com/mdn/emogotchi">исходный код</a>), мы просто запускаем {{domxref("Notification.requestPermission")}} несмотря ни на что, чтобы быть уверенными, что мы сможем получить разрешение на отправку уведомлений (тут используется синтаксис новейшего promise-based метода):</p>

<pre class="brush: js"><code>Notification.requestPermission().then(function(result) {
  console.log(result);
});</code></pre>

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

<pre class="brush: js"><code>function spawnNotification(body, icon, title) {
  var options = {
      body: body,
      icon: icon
  };
  var n = new Notification(title, options);
}</code></pre>

<h2 id="Спецификации">Спецификации</h2>

<table>
 <tbody>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
  <tr>
   <td>{{SpecName('Web Notifications')}}</td>
   <td>{{Spec2('Web Notifications')}}</td>
   <td>Уровень жизни </td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>

<p>{{Compat("api.Notification")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li>
</ul>

<p> </p>

<ul>
 <li> </li>
</ul>