[html5-예제] 메신저같은 알림창 (notifications)

예제 : http://whatdo.net/html5/example/#3
API : http://dev.w3.org/2006/webapi/WebNotifications/publish/#dfn-onclose

글이 오면 메신저처럼 PC화면 오른쪽에 알림창을 띄우는 기능입니다.
딱히 쓸데는 없지만, 쪽지 기능이나 웹 채팅 구현시 유용할듯 싶네요.

현재는 chrome에서만 올바르게 작동되니 꼭 chrome에서 보시길 권장합니다.
다른 브라우저에선 봐도 안나오니 ㅡ,.ㅡ

// https://developer.mozilla.org/en-US/docs/Web/API/notification

function notificate(){

var opt={

title:"알림 테스트"

,body:"테스트 입니다. 안녕하세요"

,data:"data"

,tag:"" // notification의 id값. 태그를 지정하면 알림이 여러개 안뜨고 한군데서 뜸

,requireInteraction:false // boolean : default false - true:사용자가 닫기,클릭등 이벤트가 있을때까지 열려있음. false:일정시간 지나면 자동으로 사라짐

,silent:false // boolean : default false - true:어떤 소리,진동도 없음

,vibrate:[200, 100, 200] // 진동 silent가 false일때 가능. https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API#Vibration_patterns

,icon:"http://cfs.tistory.com/custom/blog/7/79358/index.gif"

,image:"https://t1.daumcdn.net/cfile/tistory/13244F1E4CE5DA6E07"

};

var noti = new Notification(opt.title,opt);

noti.onerror=function(e){ console.log(e); };

noti.onclick=function(e){

console.log(location.href);

window.open("http://daum.net");

//location.href="http://daum.net";

noti.close();

};

// 폐기될 예정이라는데??

noti.onshow=function(e){ console.log(e) };

noti.onclose=function(e){ console.log(e) };

//setTimeout(function(){ noti.close(); }, 500); // 닫는 method

}

function notifyMe() {

  // Let's check if the browser supports notifications

  if (!("Notification" in window)) {

alert("This browser does not support desktop notification");

  }

  // 허용

  else if (Notification.permission === "granted") notificate();

  // 거부가 아닐경우 - default 일경우

  else if (Notification.permission !== "denied") {

Notification.requestPermission(function (permission) {

  if (permission === "granted") notificate();

});

  }

}

$(function(){

document.querySelectorAll("button")[0].addEventListener("click",function(){ notifyMe(); },false);

});

-------------------- 중요 소스 부분 시작 : api 스펙이 바뀌어서 사용 못함---------------

        var num = 0; //++

	var icon = 'http://cfs.tistory.com/custom/blog/7/79358/index.gif'; //icon file

	var tt = '테스트 입니다. 안녕하세요'; //title

	var bd = 'This is a test. Hello~~~오늘 점심은 뭘 먹을까나...'; //body, contents

	var noti = null; //notification object


	function notiPop(){

		if(noti.checkPermission()==0){// 0:allow, 1:unknown, 2:deny .. 퍼미션체크후 0일때 보여짐 default 1

			pop=noti.createNotification(icon, tt + ' --- ('+num+')', bd +' --- ('+num+')');

			pop.show();

			pop.ondisplay=function(e){--알림창 보일때 이벤트--};

			pop.onclose=function(e){--알림창 닫힐때 이벤트--};

			pop.onerror =function(e){--에러;--};

			pop.onclick=function(e){--클릭시인데, 정확히 뭘 클릭해야 하는지 아직도 모르겠음--};

			

		}		

	}


	function clickEx(){

		try{

			noti = window.webkitNotifications;

			

			if(noti.checkPermission()==0){

				notiPop();//popup

			}else{

				noti.requestPermission(function(){                                

//크롬 브라우저 상단에 허용, 거부 버튼 띄움. 허용일때만 알림창 띄움

					notiPop();//popup

				});

			}


		}catch(e){

			if(!e.TypeError || e.TypeError == 'undefined')

				//script....


		}

	}

-------------------- 중요 소스 부분 끝 ---------------