path: root/files/ru/web/api/serviceworkerregistration/shownotification/index.html

---
title: ServiceWorkerRegistration.showNotification()
slug: Web/API/ServiceWorkerRegistration/showNotification
translation_of: Web/API/ServiceWorkerRegistration/showNotification
---
<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>

<p>The <code>showNotification()</code> method of the {{domxref("ServiceWorkerRegistration")}} interface creates a notification on an active service worker.</p>

<div class="note">
<p><strong>Note</strong>: This feature is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
</div>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">​ServiceWorkerRegistration.showNotification(<em>title</em>, [<em>options</em>]).then(function(<em>NotificationEvent</em>) { ... });</pre>

<h3 id="Returns">Returns</h3>

<p>A {{jsxref('Promise')}} that resolves to a {{domxref('NotificationEvent')}}.</p>

<h3 id="Parameters">Parameters</h3>

<dl>
 <dt><code>title</code></dt>
 <dd>The title that must be shown within the notification</dd>
 <dt><code>options</code> {{optional_inline}}</dt>
 <dd>An object that allows to configure the notification. It can have the following properties:
 <ul>
  <li><code>actions</code>: An array of actions to display in the notification. The members of the array should be an object literal. It may contain the following values:
   <ul>
    <li>action: A {{domxref("DOMString")}} identifying a user action to be displayed on the notification.</li>
    <li>title: A {{domxref("DOMString")}} containing action text to be shown to the user.</li>
    <li>icon: A {{domxref("USVString")}} containg the URL of an icon to display with the action.</li>
   </ul>
   Appropriate responses are built using <code>event.action</code> within the {{event("notificationclick")}} event.</li>
  <li><code>badge</code>: The URL of an image to represent the notification when there is not enough space to display the notification itself such as, for example, the Android Notification Bar. On Android devices, the badge should accommodate devices up to 4x resolution, about 96 by 96 px, and the image will be automatically masked.</li>
  <li><code>body</code>: Строка с дополнительным контентом уведомления.</li>
  <li><code>dir</code> : The direction of the notification; it can be <code>auto</code>, <code>ltr</code>, or <code>rtl</code></li>
  <li><code>icon</code>: URL или base64 версия картинки, которая отображается рядом с уведомлением.</li>
  <li><code>image</code>: URL {{domxref("USVSTring")}} картинки, которая отображается внутри уведомления.</li>
  <li><code>lang</code>: Specify the lang used within the notification. This string must be a valid <a href="http://tools.ietf.org/html/bcp47" title="http://tools.ietf.org/html/bcp47">BCP 47 language tag</a>.</li>
  <li><code>renotify</code>: A boolean that indicates whether to supress vibrations and audible alerts when resusing a <code>tag</code> value. The default is false.</li>
  <li><code>requireInteraction</code>: Indicates that on devices with sufficiently large screens, a notification should remain active until the user clicks or dismisses it. If this value is absent or false, the desktop version of Chrome will auto-minimize notifications after approximately twenty seconds. The default value is <code>false</code>.</li>
  <li><code>tag</code>: An ID for a given notification that allows you to find, replace, or remove the notification using script if necessary.</li>
  <li><code>vibrate</code>: Шаблон вибрации, которая будет воспроизведена вместе с уведомлением. Шаблон может быть массивом из как минимум одного элемента. Значения элементов это время в миллисекундах, при этом чётные элементы (0, 2, 4, и т.д.) отражают периоды вибрации, а нечётные периоды пауз. Например, <code>[300, 100, 400]</code> будет означать вибрацию 300ms, паузу 100ms, затем вибрацию 400ms.</li>
  <li><code>data</code>: Arbitrary data that you want associated with the notification. This can be of any data type.</li>
 </ul>
 </dd>
</dl>

<h2 id="Examples">Examples</h2>

<pre class="brush: js">navigator.serviceWorker.register('sw.js');

function showNotification() {
  Notification.requestPermission(function(result) {
    if (result === 'granted') {
      navigator.serviceWorker.ready.then(function(registration) {
        registration.showNotification('Vibration Sample', {
          body: 'Buzz! Buzz!',
          icon: '../images/touch/chrome-touch-icon-192x192.png',
          vibrate: [200, 100, 200, 100, 200, 100, 200],
          tag: 'vibration-sample'
        });
      });
    }
  });
}</pre>

<p>To invoke the above function at an appropriate time, you could use the {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} event handler.</p>

<p>You can also retrieve details of the {{domxref("Notification")}}s have have been fired from the current service worker using {{domxref("ServiceWorkerRegistration.getNotifications()")}}.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Web Notifications','#dom-serviceworkerregistration-shownotificationtitle-options','showNotification()')}}</td>
   <td>{{Spec2('Web Notifications')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



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

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td><code>vibrate</code> option</td>
   <td>{{CompatChrome(45)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatOpera(32)}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>requireInteraction</code></td>
   <td>{{CompatChrome(47)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>actions</code> option</td>
   <td>{{CompatChrome(48)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>renotify</code> option</td>
   <td>{{CompatChrome(50)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatOpera(37)}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>badge</code> option</td>
   <td>{{CompatChrome(53)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatOpera(39)}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>image</code> option</td>
   <td>{{CompatChrome(56)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>data</code> option</td>
   <td>{{CompatChrome(44)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td><code>vibrate</code> option</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatOperaMobile(32)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(45)}}</td>
  </tr>
  <tr>
   <td><code>requireInteraction</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(47)}}</td>
  </tr>
  <tr>
   <td><code>actions</code> option</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(48)}}</td>
  </tr>
  <tr>
   <td><code>renotify</code> option</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatOperaMobile(37)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(50)}}</td>
  </tr>
  <tr>
   <td><code>badge</code> option</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatOperaMobile(39)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(53)}}</td>
  </tr>
  <tr>
   <td><code>image</code> option</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(56)}}</td>
  </tr>
  <tr>
   <td><code>data</code> option</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(44)}}</td>
  </tr>
 </tbody>
</table>
</div>