Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Notification

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

Summary

Notification 객체는 사용자에게 데스크탑 알림을 설정하고 표시하는데 사용 할 수 있다.

Constructor

var notification = new Notification(title, options)

Parameters

title
title 은 알림에 반드시 나타나야 한다.
options Optional
An object that allows to configure the notification. It can have the following properties:
dir : The direction of the notification, it can be auto, ltr or rtl
lang: 알림안에 특정 언어를 설정할 수 있다. 문자열은 BCP 47 language tag만 유효하다.
body: A string representing an extra content to display within the notification
tag: An ID for a given notification that allow to retrieve, replace remove it if necessary
icon: 알림에 쓰일 아이콘 이미지의 URL이다.

Properties

Static properties

Those properties are available only on the Notification object itself.

Notification.permission Read only
A string representing the current permission to display notifications. Possible value are: denied (the user refuse to have notifications displayed), granted (the user accept to have notifications displayed), or default (the user choice is unknown and therefor the browser will act as the value was denied).

Instance properties

Those properties are available only on instance of the Notification object.

Notification.dir Read only
The direction used by the notification as defined within the constructor options.
Notification.lang Read only
The code lang used by the notification as defined within the constructor options.
Notification.body Read only
The body string used by the notification as defined within the constructor options.
Notification.tag Read only
The id of the notification (if any) as defined within the constructor options.
Notification.icon Read only
The URL of the imge used as icon as defined within the constructor options.

Event handlers

Notification.onclick
A handler for the click event. It is triggered each time the use click on the notification.
Notification.onshow
A handler for the show event. It is triggered when the notification is displayed.
Notification.onerror
A handler for the error event. It is triggered each time the notification encounter an error.
Notification.onclose
A handler for the close event. It is triggered when the user close the notification.

Methods

Static methods

Those methods are available only on the Notification object itself.

Notification.requestPermission()
This method is used to ask the user if he allows the page to display notifications.

Instance methods

Those properties are available only on instance of the Notification object or through its prototype.

Notification.close()
This method allows to programmatically close a notification.

The Notification objects also inherit from the EventTarget interface.

EventTarget.addEventListener()
Register an event handler of a specific event type on the EventTarget.
EventTarget.removeEventListener()
Removes an event listener from the EventTarget.
EventTarget.dispatchEvent()
Dispatch an event to this EventTarget.

Additional methods for Mozilla chrome code

Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also WebIDL bindings.

  • void setEventHandler(DOMString type, EventHandler handler)
  • EventHandler getEventHandler(DOMString type)

Example

Assume that basic HTML

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

It's possible to send a notification as followed

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

  // Let's check if the user is okay to get some notification
  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 it's permission
  // Note, Chrome does not implement the permission static property
  // So we have to check for NOT 'denied' instead of 'default'
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {

      // Whatever the user answers, we make sure Chrome store the information
      if(!('permission' in Notification)) {
        Notification.permission = permission;
      }

      // If the user is okay, let's create a notification
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }

  // At last, if the user already denied any notification, and you 
  // want to be respectful there is no need to bother him any more.
}

See the live result

Specifications

Specification Status Comment
Notifications API Recommendation Initial specification.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5 webkit (see notes)
22
4.0 moz (see notes)
22
No support ? 6 (see notes)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 4.0 moz (see notes)
22
No support ? ?

Gecko notes

  • Prior to Firefox 22, the instanciation of a new notification must be done with the navigator.mozNotification object through its createNotification method
  • Prior to Firefox 22, the Notifiation was displayed when calling the show method and was supporting the click and close event only.

Chrome notes

Safari notes

  • Safari start supporting notification with Safari 6 but only on Mac OSX 10.8+ (Moutain Lion)

See also

문서 태그 및 공헌자

 이 페이지의 공헌자: sagnol, AshfaqHossain, junho85
 최종 변경: sagnol,