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

컴터/html5 2010. 6. 15. 19:50


예제 : 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....

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


Trackbacks 0 : Comments 0

Write a comment