---
title: Notifications API
slug: Web/API/Notifications_API
translation_of: Web/API/Notifications_API
---
<p>{{DefaultAPISidebar("Web Notifications")}}</p>

<p class="summary">Notifications API позволяют web-страницам контролировать отображение системных уведомлений для конечного пользователя — они находятся вне контекста окна браузера верхнего уровня, поэтому могут отображаться даже если пользователь сменил вкладку или перешёл к другому приложению. API были разработаны таким образом, чтобы поддерживать совместимость с существующими системами уведомлений на различных платформах.</p>

<h2 id="Концепция_и_использование">Концепция и использование</h2>

<p>На поддерживаемых платформах, отображение системных уведомлений обычно включает две вещи. Во-первых, пользователь должен разрешить текущему источнику отображать уведомления, что, как правило, происходит, при первичной загрузке приложения или сайта, используя метод  {{domxref("Notification.requestPermission()")}}. Далее будет вызван диалог со следующим текстом:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/10819/notification-bubble.png" style="display: block; height: 205px; margin: 0 auto; width: 453px;"></p>

<p>Здесь пользователь может выбрать разрешить уведомления от источника, заблокировать их или решить позже. Как только выбор будет сделан, для текущей сессии будут установлены настройки. </p>

<div class="note">
<p><strong>Примечание</strong>: Для Firefox 44, разрешения для Notifications и <a href="/en-US/docs/Web/API/Push_API">Push</a> объединяются. Если было установлено разрешение для уведомлений, push так же будут разрешены .</p>
</div>

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

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

<p>В дополнение, спецификация Notifications API определить несколько дополнений для <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a>, чтобы позволить им отправлять уведомления.</p>

<div class="note">
<p><strong>Примечание</strong>: Чтобы найти больше об использовании уведомлений в вашем приложении, читайте <a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Использование Notifications API</a>.</p>
</div>

<h2 id="Интерфейс_уведомлений">Интерфейс уведомлений</h2>

<dl>
 <dt>{{domxref("Notification")}}</dt>
 <dd>Определяет объект уведомления.</dd>
</dl>

<h3 id="Дополнение_для_Service_worker">Дополнение для Service worker</h3>

<dl>
 <dt>{{domxref("ServiceWorkerRegistration")}}</dt>
 <dd>Включает {{domxref("ServiceWorkerRegistration.showNotification()")}} и {{domxref("ServiceWorkerRegistration.getNotifications()")}} методы для контролирования отображения уведомлений.</dd>
 <dt>{{domxref("ServiceWorkerGlobalScope")}}</dt>
 <dd>Включает обработчик {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} для вызова встроенных функций, когда был выполнен клик на уведомлении.</dd>
 <dt>{{domxref("NotificationEvent")}}</dt>
 <dd>Особый тип объекта событий, основанный на {{domxref("ExtendableEvent")}}, который представляет уведомление, которое было вызвано.</dd>
</dl>

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

<table class="standard-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>Living standard</td>
  </tr>
 </tbody>
</table>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>

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

<h2 id="Firefox_OS_разрешения">Firefox OS разрешения</h2>

<p>Когда используете уведомления в приложении на Firefox OS, убедитесь, что <code>desktop-notification</code> установленно в вашем фаине манифеста. Уведомления могут быть использованы для любомого уровня разрешения, равного или выше:</p>

<pre class="brush: json">"permissions": {
  "desktop-notification": {}
}</pre>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Использование Notifications API</a></li>
</ul>