ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [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....

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


    댓글 0

Designed by Tistory.