---
title: Powiadomienie
slug: Web/API/powiadomienie
tags:
  - API
  - JS Powiadomienia
  - Powiadomienia
  - Powiadomienie
translation_of: Web/API/Notification
---
<p>{{APIRef("Web Notifications")}}</p>

<p>Interfejs Powiadomień {{domxref('Notifications_API','Notifications API')}}  jest używany do konfigurowania i wyświetlania powiadomień komputerowych do użytkownika .</p>

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

<h2 id="Konstruktor">Konstruktor</h2>

<dl>
 <dt>{{domxref("Notification.Notification()")}}</dt>
 <dd>Tworzy nową instancję obiektu {{domxref('Notification')}} .</dd>
</dl>

<h2 id="Cechy">Cechy</h2>

<h3 id="Statyczne_Cechy">Statyczne Cechy</h3>

<p>Te Cechy są dostępne tylko dla obiektu powiadomienia.</p>

<dl>
 <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
 <dd>Linia reprezentująca obecne uprawnienia do wyświetlania powiadomień.Możliwe Wartośći to:denied(Użytkownik odmawia do wyświetlania powiadomień), granted(Użytkownik zaakceptował wyświetlanie powiadomień),albo default(Wybór użytkownika jest nieznany i dlatego przeglądarka zachowuje się jak przy odmowie).</dd>
</dl>

<h3 id="Cechy_Instancji">Cechy Instancji</h3>

<p>Te Cechy są dostępne tylko dla obiektu powiadomień.</p>

<dl>
 <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt>
 <dd>Tytuł powiadomienia jak określone w opcjach parametru konstruktora.</dd>
 <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt>
 <dd>Kierunek tekstu powiadomienia jak określone w opcjach parametru konstruktora.</dd>
 <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt>
 <dd>Język kodu powiadomienia jak określone w opcjach parametru konstruktora.</dd>
 <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt>
 <dd>Tekst powiadomienia jak określone w opcjach parametru konstruktora.</dd>
 <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt>
 <dd>ID powiadomienia (jeżeli jakiekolwiek) jak określone w opcjach parametru konstruktora.</dd>
 <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt>
 <dd>Url obrazku użytego w powiadomieniu jak określone w opcjach parametru konstruktora.</dd>
 <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt>
 <dd>Zwraca klon struktury daty powiadomienia.</dd>
 <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt>
 <dd>Opisuje czy powiadomienie powinno być ciche,takie jak bez dźwięku czy wbiracji bez względu na ustawienia urządzenia.</dd>
</dl>

<h4 id="Nie_wspierane_cechy">Nie wspierane cechy</h4>

<p>Pokazane Cechy są najbardziej aktualną ze specyfikacją, ale nie są wspierane narazie przez żadną przeglądarkę.Wskazane jest aby sprawdzać regularnie czy status się zaktualizował , i daj nam znać jeżeli znajdziesz nie aktualne informacje.</p>

<dl>
 <dt>{{domxref("Notification.noscreen")}} {{readonlyinline}}</dt>
 <dd>Określa, czy należy włączyć powiadomienia na ekranie urządzenia, czy też nie.</dd>
 <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt>
 <dd>Określa, czy użytkownik powinien być powiadamiany po nowym powiadomieniu i zastąpić stare powiadomienie.</dd>
 <dt>{{domxref("Notification.sound")}} {{readonlyinline}}</dt>
 <dd>Określa dźwięk do odtworzenia wraz z powiadomieniem,za miejscę podstawowego powiadomienia systemowego.</dd>
 <dt>{{domxref("Notification.sticky")}} {{readonlyinline}}</dt>
 <dd>Określa czy powiadomienie powinno być trudniejsze do usunięcia przez użytkownika, klejące 'sticky'.</dd>
 <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
 <dd>Określa wibrację urządzenia do emisji przez urządzenie.</dd>
</dl>

<h4 id="Obsługa_zdarzeń">Obsługa zdarzeń</h4>

<dl>
 <dt>{{domxref("Notification.onclick")}}</dt>
 <dd>Obsługa dla zdarzenia {{event("click")}}.Odpalane przy każdym kliknięciu powiadomienia.</dd>
 <dt>{{domxref("Notification.onerror")}}</dt>
 <dd>Obsługa dla zdarzenia {{event("error")}}.Odpalane przy każdym razie kiedy powiadomienie będzie napotykało błąd.</dd>
</dl>

<h4 id="Przestarzała_obsługa">Przestarzała obsługa</h4>

<p>Pokazana obsługa zdarzeń jest nadal wspierana w  sekcji poniższej {{anch("browser compatibility")}},ale nie pokazane w obecnej specyfikacji. I w związku z tym, aby bezpiecznie założyć, że są przestarzałe mogą przestać działać w przyszłych wersjach przeglądarek.</p>

<dl>
 <dt>{{domxref("Notification.onclose")}}</dt>
 <dd>Obsługa zdażenia {{event("close")}}. Zamyka powiadomienie.</dd>
 <dt>{{domxref("Notification.onshow")}}</dt>
 <dd>Obsługa zdażenia {{event("show")}}.Pokazuje gdy powiadomienie jest pokazywane.</dd>
</dl>

<h2 id="Metoda">Metoda</h2>

<h3 id="Statyczna_metoda">Statyczna metoda</h3>

<p>Te metody są dostępne tylko dla obiektu powiadomień.</p>

<dl>
 <dt>{{domxref("Notification.requestPermission()")}}</dt>
 <dd>Requests permission from the user to display notifications.</dd>
</dl>

<h3 id="Metoda_instacji">Metoda instacji</h3>

<p>Te cechy są dostępne tylko dla obiektu powiadomień albo to <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain" name="prototyp"><code>prototype</code></a>. Obiekt powiadomień pobiera to z interfejsu {{domxref("EventTarget")}}.</p>

<dl>
 <dt>{{domxref("Notification.close()")}}</dt>
 <dd>Programowo zamyka powiadomienie.</dd>
</dl>

<h2 id="Przykład">Przykład</h2>

<p>W podstawowtym HTMLu:</p>

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

<p>Jest to możliwe aby wysłać powiadomienie - tutaj pokazujemy jak łatwo i w kompletnym składzie kodu zobaczyć czy powiadomienia są wspierane,potem sprawdzić uprawnienia czy zostały nadane dla obecnego dźwięku powiadomień, potem sprawdź uprawnienia jeżeli potrzebne,przed wysłaniem powiadomienia. </p>

<pre class="brush: js">function notifyMe() {
  // Sprawdzamy czy przeglądarka obsługuje powiadomienia.
  if (!("Notification" in window)) {
    alert("Ta przeglądarka nie obsługuje powiadomień");
  }

  // Sprawdźmy czy uprawnienia dla powiadomienia zostały nadane
  else if (Notification.permission === "granted") {
    // jeżeli są tworzymy powiadomienie
    var notification = new Notification("Hi there!");
  }

  // W innym przypadku tworzymy zapytanie o uprawnienia
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      //Jeżeli użytkownik zaakceptuje tworzymy powiadomienie
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }

  // Na koniec, jeżeli użytkownik odmówił powiadomień i chcesz szanować go
  // nie ma potrzeby dręczyć go zapytaniami
}</pre>

<p>{{EmbedLiveSample('Przyk%C5%82ad', '100%', 30)}}</p>

<p>W wielu przypadkach, nie potrzebujesz tworzyć nowych form. Dla przykładu, w naszym <a href="http://mdn.github.io/emogotchi/">Emogotchi demo</a> (<a href="https://github.com/mdn/emogotchi" name="Zobacz kod źródłowy">see source code</a>), Prosto odpalamy {{domxref("Notification.requestPermission")}} aby sprawdzać czy możemy dostać uprawnienia do wysyłania powiadomień: </p>

<pre class="brush: js">Notification.requestPermission();</pre>

<p>Potem odpalamy funkcje <code>spawnNotification()</code> kiedy chcemy odpalić powiadomienie — to jest przekazywane do argumentu opisanego tekstu,ikony i tytułu który chcemy, potem tworzy konieczne opcje obiektu i odpala powiadomienie używając konstruktora {{domxref("Notification.Notification","Notification()")}}.</p>

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

<h2 id="Specifikacja">Specifikacja</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')}}</td>
   <td>{{Spec2('Web Notifications')}}</td>
   <td>Living standard</td>
  </tr>
 </tbody>
</table>

<h2 id="Kompatybilność_Przeglądarek">Kompatybilność Przeglądarek</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Podstawowa usługa</td>
   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
    22</td>
   <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br>
    22</td>
   <td>{{CompatNo}}</td>
   <td>25</td>
   <td>6<sup>[3]</sup></td>
  </tr>
  <tr>
   <td><code>ikona</code></td>
   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
    22</td>
   <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br>
    22</td>
   <td>{{CompatNo}}</td>
   <td>25</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Available in workers</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("41.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>silent</code></td>
   <td>{{CompatChrome(43.0)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>noscreen</code>, <code>renotify</code>, <code>sound</code>, <code>sticky</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</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>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>
    <p>{{CompatVersionUnknown}}</p>
   </td>
   <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br>
    22</td>
   <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
    1.2</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>
    <p>{{CompatVersionUnknown}}</p>
   </td>
  </tr>
  <tr>
   <td><code>icon</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br>
    22</td>
   <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
    1.2</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>Available in workers</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("41.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>silent</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(43.0)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(43.0)}}</td>
  </tr>
  <tr>
   <td><code>noscreen</code>, <code>renotify</code>, <code>sound</code>, <code>sticky</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Before Chrome 22, the support for notification followed an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.</p>

<p>Before Chrome 32, {{domxref("Notification.permission")}} was not supported.</p>

<p>Before Chrome 42, service worker additions were not supported.</p>

<p>[2] Prior to Firefox 22 (Firefox OS &lt;1.2), the instantiation of a new notification must be done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its <code>createNotification</code> method.</p>

<p>Prior to Firefox 22 (Firefox OS &lt;1.2), the Notification was displayed when calling the <code>show</code> method and supported only the <code>click</code> and <code>close</code> events.</p>

<p>Nick Desaulniers wrote a <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> to cover both newer and older implementations.</p>

<p>One particular Firefox OS issue is that you can <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L171">pass a path to an icon</a> to use in the notification, but if the app is packaged you cannot use a relative path like <code>/my_icon.png</code>. You also can't use <code>window.location.origin + "/my_icon.png"</code> because <code>window.location.origin</code> is null in packaged apps. The <a href="https://developer.mozilla.org/en-US/Apps/Developing/Manifest#origin">manifest origin field</a> fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS &lt;1.1 is to <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L168">pass an absolute URL to an externally hosted version of the icon</a>. 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.</p>

<p>When using notifications  in a Firefox OS app, be sure to add the <code>desktop-notification</code> permission in your manifest file. Notifications can be used at any permission level, hosted or above: <code>"permissions": { "desktop-notification": {} }</code></p>

<p>[3] Safari zaczeło wspierać powiadomienia z wersją Safari 6,ale tylko od Mac OSX 10.8+(Mountain Lion).</p>

<h2 id="Zobacz_Także">Zobacz Także</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API" lang="PL" name="Używanie API Powiadomień">Using the Notifications API</a></li>
</ul>