Web Notification

소개

Web Notification은 W3C에서 정의한  웹브라우저를 통해 사용자 운영체제에 Notification(알림) 창을 띄워주는 역할을 하는 javascript API입니다.
보통 Notification 은 스마트폰에서 App이 실행되어 있지 않은 상태에서도 여러가지 알림을 사용자에게 전달해 주기 위해 사용되고 있는데요. 이러한 기능을 웹에서도 구현할수 있도록 도와주는게 Web Notification 이라고 볼 수 있습니다.
현재는 Working Draft 상태지만 Chrome, Firefox, Safari 같은 브라우저에서 지원하는걸 보면 앞으로 많은 발전이 있을것 같은 긍정적인 생각이 듭니다.

사용방법

var notification = new Notification(title, options)

매개변수

• title : 알림창의 제목
• options : 알림창에 들어갈 내용들을 정의한다.
  객체형태로 전달되며 key값으로는 dir, lang, body, tag, icon이 있다.

#프로퍼티와 매소드는 추후 업데이트 하겠습니다.

예제

HTML

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

Javascript

function notifyMe() {
  if (!"Notification" in window) {
    alert("This browser does not support desktop notification");
  }
  else if (Notification.permission === "granted") {
    var notification = new Notification("Hi there!");
  }
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      if(!('permission' in Notification)) {
        Notification.permission = permission;
      }
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }
}

Web Notification은 브라우저에서 Desktop 또는 Mobile로 알림을 보내도록 해주기 때문에 사용자가 반드시 알림을 받을 수 있도록 권한을 승인해 주어야 합니다. 아래의 코드는 브라우저의 지원여부와 사용자가 Notification을 허락했는지 구분합니다.

  // 브라우저가 Notification 기능을 지원하는지 체크합니다.
  if (!"Notification" in window) {
    alert("This browser does not support desktop notification");
  }
  // 사용자가 Notification 사용을 허락했는지 체크합니다.
  else if (Notification.permission === "granted") {
    // 허락했다면 Notification을 생성합니다.
    var notification = new Notification("Hi there!");
  }

크롬 브라우저에서는 permission 속성이 구현되어 있지 않기 때문에 사용자가 의도적으로 Notification을 ‘denied’ 한 경우를 체크합니다.

  // 크롬 브라우저는 permission 속성이 구현되어 있지 않기 때문에
  // 사용자가 의도적으로 'denied' 한 경우를 체크합니다.
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      // 사용자가 사용 여부를 체크했다면, 크롬 Notification 상태를 갱신합니다.
      if(!('permission' in Notification)) {
        Notification.permission = permission;
      }
      // 사용자가 승낙했다면, Notification을 생성합니다.
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });

응용

아주 간단한 응용 예제를 하나 보겠습니다. Notification에 icon, body, title 값을 넣어주고 메일이 온 것 처럼 코드를 살짝 변경합니다.
 HTML

<button onclick="mailMe()">Mail me!</button>

Javascript

function mailMe() {
  var parameter_noti = {
	title:"[공유] Web Notification 공유",
	icon:"http://img.naver.net/static/www/up/2014/0123/mat_19165764t.jpg",
	body:"안녕하세요 김대현입니다. 오늘은 재밌는 Web Notification을 공유하려고 합니다~~~~"
  };
  if (!"Notification" in window) {
    alert("This browser does not support desktop notification");
  }
  else if (Notification.permission === "granted") {
    var notification = new Notification(parameter_noti.title,{
    	icon:parameter_noti.icon,
    	body:parameter_noti.body
    });
  }
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      if(!('permission' in Notification)) {
        Notification.permission = permission;
      }
      if (permission === "granted") {
        var notification = new Notification(parameter_noti.title,{
        	icon:parameter_noti.icon,
        	body:parameter_noti.body
        });
      }
    });
  }
}

결과

브라우저 호환성

Desktop

• Chrome :  22이상 지원 (하위 버전 참고 링크)
• Firefox(Gecko) : 22이상 지원 (하위 버전 참고 링크)
• Internet Explorer : 미지원
• Opera : 미지원
• Safari : 6 버전(단, Mac OSX 10.8 이상 /Mountain Lion)

Mobile

• Firefox Mobile (Gecko) : 22이상
• 그 외 미지원

마무리

개인적으로 생각할때 Web Notification은 email 알림 외에도 웹채팅, Task 알림 등 다양하게 쓸 수 있을것 같습니다.
HTML5와 nodejs의 Socket 통신을 이용하여 사용자가 몇분동안 현재 페이지(또는 탭)에서 응답이 없을때 desktop에서
메일이나 채팅내용을 push 받을 수 있다면 재밌지 않을까요?
단점으로는 브라우저마다 알림창의 모양과 사라지는 시간이 다르고, 브라우저가 꺼지면 Notification 기능도 종료되기 때문에 이 부분은 고려해야될것 같습니다.
감사합니다.

참고

http://www.w3.org/TR/notifications/#language-0 ( W3C Notification – 영문)
https://developer.mozilla.org/en/docs/Web/API/Notification (Mozilla Notification – 영문)
https://developer.mozilla.org/ko/docs/WebAPI/Using_Web_Notifications (Mozilla Using Notification – 한글)