path: root/files/ko/web/api/notification/index.html

---
title: Notification
slug: Web/API/notification
translation_of: Web/API/Notification
---
<p>{{APIRef("Web Notifications")}}</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API">Notifications API</a>의 <code>Notification</code> 인터페이스는 사용자에게 데스크톱 알림을 설정하고 보여주는데 사용됩니다.</p>

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

<h2 id="Method_overview" name="Method_overview">Constructor</h2>

<dl>
 <dt>{{domxref("Notification.Notification", "Notification()")}}</dt>
 <dd>새 <code>Notification</code> 객체 인스턴스를 생성합니다.</dd>
</dl>

<h2 id="Properties">Properties</h2>

<h3 id="Static_properties">Static properties</h3>

<p>이 속성은 <code>Notification</code> 객체 안에만 존재합니다.</p>

<dl>
 <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
 <dd>알림을 표시하기 위한 현재의 권한을 나타낸다. 가능한 값: <code>denied</code> (사용자가 알림 표시를 거절), <code>granted</code> (사용자가 알림 표시를 허용), <code>default</code> (사용자의 선택을 알 수 없기 때문에 브라우저가 거절한 상태의 값으로 작동하게됨).</dd>
</dl>

<h3 id="Instance_properties">Instance properties</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.requireInteraction")}} {{readonlyinline}}</dt>
 <dd>자동으로 닫히지 않고 사용자가 클릭할 때 까지 활성화 된 채로 남아 있어야 함을 나타내는 {{jsxref("Boolean")}} 값입니다.</dd>
 <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt>
 <dd>기기의 설정과 상관없이 소리가 없거나 진동이 울려야 한다는 등 알림이 조용해야 하는지를 나타냅니다.</dd>
 <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt>
 <dd>알림이 생성되었거나 적용 가능한(과거, 현재, 미래) 시간을 나타냅니다.</dd>
 <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt>
 <dd>생성자의 첫번째 파라메터에 명시된 알림의 제목입니다.</dd>
 <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
 <dd>진동기가 있는 기기가 나타내야할 진동 패턴을 나타냅니다.</dd>
 <dt>
 <h4 id="Unsupported_properties">Unsupported properties</h4>

 <p>아래의 속성은 최신 명세에는 등록되어 있지만 아직 구현한 브라우저가 없는 속성입니다. 현재의 상태에서 변경된 사항은 없는지 계속 확인해보아야 하는 내용이고 오래된 내용이 있으면 알려주시기 바랍니다.</p>
 </dt>
 <dt>{{domxref("Notification.noscreen")}} {{readonlyinline}}</dt>
 <dd>알림이 기기의 화면을 활성화해야 하는지를 나타냅니다.</dd>
 <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt>
 <dd>새 알림이 오래된 알림을 교체할 때 사용자에게 알려야 하는지를 나타냅니다.</dd>
 <dt>{{domxref("Notification.sound")}} {{readonlyinline}}</dt>
 <dd>기본 시스템 설정 알림 소리를 대신할 알림 소리로 사용될 소리 자원을 나타냅니다.</dd>
 <dt>{{domxref("Notification.sticky")}} {{readonlyinline}}</dt>
 <dd>사용자가 쉽게 제거할 수 없게 '달라붙어'있어야 하는지를 나타냅니다.</dd>
</dl>

<h4 id="Event_handlers">Event handlers</h4>

<dl>
 <dt>{{domxref("Notification.onclick")}}</dt>
 <dd>{{event("click")}} 이벤트에 대한 핸들러입니다. 사용자가 알림을 클릭할 때 마다 호출됩니다.</dd>
 <dt>{{domxref("Notification.onerror")}}</dt>
 <dd>{{event("error")}} 이벤트에 대한 핸들러입니다. 알림에 오류가 발생할 때 마다 호출됩니다.</dd>
</dl>

<h4 id="Obsolete_handlers">Obsolete handlers</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>
</dl>

<h2 id="Methods">Methods</h2>

<h3 id="Static_methods">Static methods</h3>

<p>이 메서드는 <code>Notification</code> 객체에만 존재합니다.</p>

<dl>
 <dt>{{domxref("Notification.requestPermission()")}}</dt>
 <dd>이 메서드는 페이지에서 알림을 표시할지 요청하는데 사용됩니다.</dd>
</dl>

<h3 id="Instance_methods">Instance methods</h3>

<p>이 메서드는 <code>Notification</code> 객체의 인스턴스나 그 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain"><code>prototype</code></a>에만 존재합니다. <code>Notification</code> 객체는 또한 {{domxref("EventTarget")}} 인터페이스를 상속 받습니다.</p>

<dl>
 <dt>{{domxref("Notification.close()")}}</dt>
 <dd>프로그램으로 알림을 닫습니다.</dd>
</dl>

<h2 id="Example">Example</h2>

<p>다음과 같은 기본 HTML이 있을 때:</p>

<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>notifyMe()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Notify me!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span></code></pre>

<p>다음과 같이 알림을 보낼 수 있습니다. 알림이 지원되는지 우선 확인해 볼 때 사용할 수 있는 풍부하게 완성된 예제코드입니다. 그 다음에 현재 페이지에서 알림을 보낼 수 있게 권한이 있는지를 확인하고 알림을 보내기 전에 권한이 필요하면 요청을 합니다.</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">notifyMe</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="comment token">// Let's check if the browser supports notifications</span>
  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="punctuation token">(</span><span class="string token">"Notification"</span> <span class="keyword token">in</span> window<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"This browser does not support desktop notification"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span>

  <span class="comment token">// Let's check whether notification permissions have already been granted</span>
  <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>Notification<span class="punctuation token">.</span>permission <span class="operator token">===</span> <span class="string token">"granted"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    <span class="comment token">// If it's okay let's create a notification</span>
    <span class="keyword token">var</span> notification <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Notification</span><span class="punctuation token">(</span><span class="string token">"Hi there!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span>

  <span class="comment token">// Otherwise, we need to ask the user for permission</span>
  <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>Notification<span class="punctuation token">.</span>permission <span class="operator token">!==</span> <span class="string token">'denied'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    Notification<span class="punctuation token">.</span><span class="function token">requestPermission</span><span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span>permission<span class="punctuation token">)</span> <span class="punctuation token">{</span>
      <span class="comment token">// If the user accepts, let's create a notification</span>
      <span class="keyword token">if</span> <span class="punctuation token">(</span>permission <span class="operator token">===</span> <span class="string token">"granted"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
        <span class="keyword token">var</span> notification <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Notification</span><span class="punctuation token">(</span><span class="string token">"Hi there!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
      <span class="punctuation token">}</span>
    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span>

  <span class="comment token">// At last, if the user has denied notifications, and you </span>
  <span class="comment token">// want to be respectful there is no need to bother them any more.</span>
<span class="punctuation token">}</span></code></pre>

<p>{{EmbedLiveSample('Example', '100%', 30)}}</p>

<p>많은 경우에 이렇게 장황할 필요는 없습니다. 예를 들어 <a href="http://mdn.github.io/emogotchi/">Emogotchi 데모</a>(<a href="https://github.com/mdn/emogotchi">소스코드</a>)에서는 단순히 알림을 보내기 위해서 권한을 얻을 수 있는지와 상관없이 {{domxref("Notification.requestPermission")}}를 실행합니다(이 경우는 새로운 프로미스 기반 메서드 문법을 사용):</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js">Notification<span class="punctuation token">.</span><span class="function token">requestPermission</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>result<span class="punctuation token">)</span> <span class="punctuation token">{</span>
  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>result<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

<p>그 다음에 알림이 필요한 때에 단순히 <code>spawnNotification()</code> 함수를 실행합니다. 본문과 아이콘, 제목을 인자로 넘기면 필요한 <code>options</code> 객체를 만들고 {{domxref("Notification.Notification","Notification()")}} 생성자를 사용해서 알림을 발생시킵니다.</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">spawnNotification</span><span class="punctuation token">(</span>theBody<span class="punctuation token">,</span>theIcon<span class="punctuation token">,</span>theTitle<span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="keyword token">var</span> options <span class="operator token">=</span> <span class="punctuation token">{</span>
      body<span class="punctuation token">:</span> theBody<span class="punctuation token">,</span>
      icon<span class="punctuation token">:</span> theIcon
  <span class="punctuation token">}</span>
  <span class="keyword token">var</span> n <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Notification</span><span class="punctuation token">(</span>theTitle<span class="punctuation token">,</span>options<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span></code></pre>

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

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

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

<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</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
    22</td>
   <td>{{CompatVersionUnknown}}</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>icon</code></td>
   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
    22</td>
   <td>{{CompatUnknown}}</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>{{CompatVersionUnknown}}</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>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>noscreen</code>, <code>sticky</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>sound</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>renotify</code></td>
   <td>{{CompatChrome(50.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Promise-based <code>Notification.requestPermission()</code></td>
   <td>{{CompatChrome(46.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("47.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatOpera(40)}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>vibrate</code>, <code>actions</code></td>
   <td>{{CompatChrome(53.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td> </td>
   <td>{{CompatOpera(39)}}</td>
   <td> </td>
  </tr>
  <tr>
   <td><code>badge</code></td>
   <td>{{CompatChrome(53.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td> </td>
   <td>{{CompatOpera(39)}}</td>
   <td> </td>
  </tr>
  <tr>
   <td><code>image</code></td>
   <td>{{CompatChrome(55.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td> </td>
   <td>{{CompatUnknown}}</td>
   <td> </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>Edge</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>{{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>
    <p>{{CompatVersionUnknown}}</p>
   </td>
  </tr>
  <tr>
   <td><code>icon</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</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>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("41.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>silent</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(43.0)}}</td>
   <td>{{CompatUnknown}}</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>sticky</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>sound</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>renotify</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(50.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Promise-based <code>Notification.requestPermission()</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("47.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>vibrate</code>, <code>actions</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(53.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td>{{CompatOperaMobile(39)}}</td>
   <td> </td>
   <td>{{CompatChrome(53.0)}}</td>
  </tr>
  <tr>
   <td><code>badge</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(53.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td>{{CompatOperaMobile(39)}}</td>
   <td> </td>
   <td>{{CompatChrome(53.0)}}</td>
  </tr>
  <tr>
   <td><code>image</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td>{{CompatUnknown}}</td>
   <td> </td>
   <td>{{CompatChrome(55.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Chrome 22 이전에는 <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">오래된 접두사형 명세</a>와 새 알림 인스턴스를 만들 때 {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} 객체를 사용해서 알림을 지원합니다.</p>

<p>Chrome 32 이전에는 {{domxref("Notification.permission")}}이 지원되지 않았습니다.</p>

<p>Chrome 42 이전에는 서비스 워커 추가가 지원되지 않았습니다.</p>

<p>Chrome 49 부터 익명(incognito) 모드에서는 알림이 작동하지 않습니다.</p>

<p>[2] Firefox 22(Firefox OS &lt;1.2) 이전에는 새 알림 인스턴스 생성이 {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} 객체의 <code>createNotification</code> 메서드를 통해서 해야 했습니다.</p>

<p>Firefox 22 (Firefox OS &lt;1.2) 이전에는 Notification이 <code>show</code> 메서드를 호출할 때에만 나왔고 <code>click</code>과 <code>close</code> 이벤트 만 지원했습니다.</p>

<p>새로운 구현와 이전 구현을 다 포괄하기 위해서 Nick Desaulniers가 <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a>을 작성했습니다.</p>

<p>한가지 특별한 Firefox OS 이슈가 있는데 알림 아이콘을 사용하기 위해 <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L171">아이콘 경로를 전달</a> 할 수는 있지만 앱이 패키징되면 <code>/my_icon.png</code>와 같이 상대 경로를 사용할 수 없다는 점입니다. 또한 패키징 된 앱에서는 <code>window.location.origin</code>이 null이기 때문에 <code>window.location.origin + "/my_icon.png"</code>도 사용할 수 없습니다. <a href="https://developer.mozilla.org/en-US/Apps/Developing/Manifest#origin">Manifest origin 필드</a>로 이 문제를 해결할 수 있지만 Firefox OS 1.1+에서만 사용할 수 있습니다. Firefox OS &lt;1.1에 대한 가능한 해결책은 <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L168">외부에서 호스트하는 절대경로 아이콘 URL을 넘기는 것</a> 입니다. 이렇게 하면 아이콘 없이 알림이 먼저 나오고 그 다음에 아이콘에 붙게 되지만 모든 버전의 Firefox OS에서 동작합니다.</p>

<p>Firefox OS 앱에서 알림을 사용할 때에는 manifest 파일에 <code>desktop-notification</code> 권한을 추가하도록 합니다. 알림은 호스트 되거나 그 이상의 수준에서 사용할 수 있습니다: <code>"permissions": { "desktop-notification": {} }</code></p>

<p>[3] Safari는 Safari 6에서 알림을 지원하지만 Mac OSX 10.8+ (Mountain Lion)에서만 지원합니다.</p>

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

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li>
</ul>