--- title: Notification slug: Web/API/notification translation_of: Web/API/Notification ---

{{APIRef("Web Notifications")}}

Notifications API의 Notification 인터페이스는 사용자에게 데스크톱 알림을 설정하고 보여주는데 사용됩니다.

{{AvailableInWorkers}}

Constructor

{{domxref("Notification.Notification", "Notification()")}}
새 Notification 객체 인스턴스를 생성합니다.

Properties

Static properties

이 속성은 Notification 객체 안에만 존재합니다.

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

Instance properties

이 속성은 Notification 객체의 인스턴스 안에만 존재합니다.

{{domxref("Notification.actions")}} {{readonlyinline}}
생성자의 옵션 파라메터 안에 명시된 알림의 액션 배열입니다.
{{domxref("Notification.badge")}} {{readonlyinline}}
알림을 나타낼 충분한 여유 공간이 없을 때에 알림을 표시하는 이미지의 URL입니다.
{{domxref("Notification.body")}} {{readonlyinline}}
생성자의 옵션 파라메터 안에 명시된 알림의 본문입니다.
{{domxref("Notification.data")}} {{readonlyinline}}
알림 데이타의 구조화된 복사본을 반환합니다.
{{domxref("Notification.dir")}} {{readonlyinline}}
생성자의 옵션 파라메터 안에 명시된 알림 글의 방향입니다.
{{domxref("Notification.lang")}} {{readonlyinline}}
생성자의 옵션 파라메터 안에 명시된 알림의 언어 코드입니다.
{{domxref("Notification.tag")}} {{readonlyinline}}
생성자의 옵션 파라메터 안에 명시된 경우 알림의 ID입니다.
{{domxref("Notification.icon")}} {{readonlyinline}}
생성자의 옵션 파라메터 안에 명시된 알림의 아이콘으로 사용될 이미지의 URL입니다.
{{domxref("Notification.image")}} {{readonlyinline}}
생성자의 옵션 파라메터 안에 명시된 알림의 일부분으로 표시될 이미지의 URL입니다.
{{domxref("Notification.requireInteraction")}} {{readonlyinline}}
자동으로 닫히지 않고 사용자가 클릭할 때 까지 활성화 된 채로 남아 있어야 함을 나타내는 {{jsxref("Boolean")}} 값입니다.
{{domxref("Notification.silent")}} {{readonlyinline}}
기기의 설정과 상관없이 소리가 없거나 진동이 울려야 한다는 등 알림이 조용해야 하는지를 나타냅니다.
{{domxref("Notification.timestamp")}} {{readonlyinline}}
알림이 생성되었거나 적용 가능한(과거, 현재, 미래) 시간을 나타냅니다.
{{domxref("Notification.title")}} {{readonlyinline}}
생성자의 첫번째 파라메터에 명시된 알림의 제목입니다.
{{domxref("Notification.vibrate")}} {{readonlyinline}}
진동기가 있는 기기가 나타내야할 진동 패턴을 나타냅니다.

Unsupported properties

아래의 속성은 최신 명세에는 등록되어 있지만 아직 구현한 브라우저가 없는 속성입니다. 현재의 상태에서 변경된 사항은 없는지 계속 확인해보아야 하는 내용이고 오래된 내용이 있으면 알려주시기 바랍니다.

{{domxref("Notification.noscreen")}} {{readonlyinline}}
알림이 기기의 화면을 활성화해야 하는지를 나타냅니다.
{{domxref("Notification.renotify")}} {{readonlyinline}}
새 알림이 오래된 알림을 교체할 때 사용자에게 알려야 하는지를 나타냅니다.
{{domxref("Notification.sound")}} {{readonlyinline}}
기본 시스템 설정 알림 소리를 대신할 알림 소리로 사용될 소리 자원을 나타냅니다.
{{domxref("Notification.sticky")}} {{readonlyinline}}
사용자가 쉽게 제거할 수 없게 '달라붙어'있어야 하는지를 나타냅니다.

Event handlers

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

Obsolete handlers

아래의 이벤트 핸들러는 {{anch("browser compatibility")}} 섹션에 나타난 대로 아직 지원되지만 현재 명세에 없는 내용입니다. 폐지된 것으로 생각해야 하고 앞으로 나올 브라우저에서는 작동하지 않을 수 있습니다.

{{domxref("Notification.onclose")}}
{{event("close")}} 이벤트에 대한 핸들러입니다. 사용자가 알림을 닫을 때 호출됩니다.
{{domxref("Notification.onshow")}}
{{event("show")}} 이벤트에 대한 핸들러입니다. 알림이 표시될 때 호출됩니다.

Methods

Static methods

이 메서드는 Notification 객체에만 존재합니다.

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

Instance methods

이 메서드는 Notification 객체의 인스턴스나 그 prototype에만 존재합니다. Notification 객체는 또한 {{domxref("EventTarget")}} 인터페이스를 상속 받습니다.

{{domxref("Notification.close()")}}
프로그램으로 알림을 닫습니다.

Example

다음과 같은 기본 HTML이 있을 때:

<button onclick="notifyMe()">Notify me!</button>

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

function notifyMe() {
  // Let's check if the browser supports notifications
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // Let's check whether notification permissions have already been granted
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

  // Otherwise, we need to ask the user for permission
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      // If the user accepts, let's create a notification
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }

  // At last, if the user has denied notifications, and you 
  // want to be respectful there is no need to bother them any more.
}

{{EmbedLiveSample('Example', '100%', 30)}}

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

Notification.requestPermission().then(function(result) {
  console.log(result);
});

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

function spawnNotification(theBody,theIcon,theTitle) {
  var options = {
      body: theBody,
      icon: theIcon
  }
  var n = new Notification(theTitle,options);
}

Specifications

Specification Status Comment
{{SpecName('Web Notifications')}} {{Spec2('Web Notifications')}} Living standard

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5{{property_prefix("webkit")}}[1]
22		 {{CompatVersionUnknown}} 4.0 {{property_prefix("moz")}}[2]
22		 {{CompatNo}} 25 6[3]
icon 5{{property_prefix("webkit")}}[1]
22		 {{CompatUnknown}} 4.0 {{property_prefix("moz")}}[2]
22		 {{CompatNo}} 25 {{CompatNo}}
Available in workers {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatGeckoDesktop("41.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
silent {{CompatChrome(43.0)}} {{CompatUnknown}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
noscreen, sticky {{CompatNo}} {{CompatUnknown}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
sound {{CompatNo}} {{CompatUnknown}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
renotify {{CompatChrome(50.0)}} {{CompatUnknown}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Promise-based Notification.requestPermission() {{CompatChrome(46.0)}} {{CompatUnknown}} {{CompatGeckoDesktop("47.0")}} {{CompatUnknown}} {{CompatOpera(40)}} {{CompatNo}}
vibrate, actions {{CompatChrome(53.0)}} {{CompatUnknown}}     {{CompatOpera(39)}}  
badge {{CompatChrome(53.0)}} {{CompatUnknown}}     {{CompatOpera(39)}}  
image {{CompatChrome(55.0)}} {{CompatUnknown}}     {{CompatUnknown}}  
Feature Android Android Webview Edge Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support {{CompatUnknown}}

{{CompatVersionUnknown}}

 {{CompatVersionUnknown}} 4.0{{property_prefix("moz")}}[2]
22		 1.0.1{{property_prefix("moz")}}[2]
1.2		 {{CompatNo}} {{CompatUnknown}} {{CompatNo}}

{{CompatVersionUnknown}}
icon {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}} 4.0{{property_prefix("moz")}}[2]
22		 1.0.1{{property_prefix("moz")}}[2]
1.2		 {{CompatNo}} {{CompatUnknown}} {{CompatNo}} {{CompatVersionUnknown}}
Available in workers {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatGeckoMobile("41.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}}
silent {{CompatNo}} {{CompatChrome(43.0)}} {{CompatUnknown}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatChrome(43.0)}}
noscreen, sticky {{CompatNo}} {{CompatNo}} {{CompatUnknown}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
sound {{CompatNo}} {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatVersionUnknown}}
renotify {{CompatNo}} {{CompatChrome(50.0)}} {{CompatUnknown}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Promise-based Notification.requestPermission() {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatGeckoMobile("47.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
vibrate, actions {{CompatNo}} {{CompatChrome(53.0)}} {{CompatUnknown}}       {{CompatOperaMobile(39)}}   {{CompatChrome(53.0)}}
badge {{CompatNo}} {{CompatChrome(53.0)}} {{CompatUnknown}}       {{CompatOperaMobile(39)}}   {{CompatChrome(53.0)}}
image {{CompatNo}} {{CompatNo}} {{CompatUnknown}}       {{CompatUnknown}}   {{CompatChrome(55.0)}}

[1] Chrome 22 이전에는 오래된 접두사형 명세와 새 알림 인스턴스를 만들 때 {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} 객체를 사용해서 알림을 지원합니다.

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

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

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

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

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

새로운 구현와 이전 구현을 다 포괄하기 위해서 Nick Desaulniers가 Notification shim을 작성했습니다.

한가지 특별한 Firefox OS 이슈가 있는데 알림 아이콘을 사용하기 위해 아이콘 경로를 전달 할 수는 있지만 앱이 패키징되면 /my_icon.png와 같이 상대 경로를 사용할 수 없다는 점입니다. 또한 패키징 된 앱에서는 window.location.origin이 null이기 때문에 window.location.origin + "/my_icon.png"도 사용할 수 없습니다. Manifest origin 필드로 이 문제를 해결할 수 있지만 Firefox OS 1.1+에서만 사용할 수 있습니다. Firefox OS <1.1에 대한 가능한 해결책은 외부에서 호스트하는 절대경로 아이콘 URL을 넘기는 것 입니다. 이렇게 하면 아이콘 없이 알림이 먼저 나오고 그 다음에 아이콘에 붙게 되지만 모든 버전의 Firefox OS에서 동작합니다.

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

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

See also