如何通过HTMl5实现桌面通知提示功能？

<button id="button">有人想加你为好友</button>
<p id="text"></p>
;(function (){
  if(window.Notification){
    var btn = document.getElementById("button");
    var txt = document.getElementById("text");
    btn.onclick = function (){
      if(Notification.permission == "granted"){
        popNotice();
      }else if(Notification.permission != "denied"){
        Notification.requestPermission().then(function (permission){
          popNotice()
        })
      }
    };
    function popNotice(){
      if(Notification.permission == "granted"){
        var notification = new Notification("你好:",{
          body:"请问今晚有空吗",
          icon:"http://image.zhangxinxu.com/左边头像地址"
        });
        notification.onclick = function (){
          txt.innerHTML = new Date().toTimeString().split(" ")[0]+"收到信息";
          notification.close();
        }
      }
    }
  }else{
    console.log("浏览器不支持Notification");
  }
})();