web通知

<html>
<head>
    <title>桌面通知</title>
    <meta name="description" content="实战Chrome浏览器桌面通知" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
    <script type='text/javascript'>
 
    //granted  允许  denied 拒绝  undefined  未定义  default 用户不操作
    function getStatus()
    {
 
        return Notification.permission;
 
 
    }
 
 
    function init() {
      if (!("Notification" in window)){
          alert("您当前浏览器不支持该功能!
建议使用猎豹、360等浏览器使用此功能");
          $("#zmtz").removeAttr("checked");
      }
      else {
          //申请授权
          if (Notification.permission == null || Notification.permission == undefined)
              window.webkitNotifications.requestPermission();
          else if (Notification.permission !== 'denied') {
              Notification.requestPermission(function (permission) {
                  if (!('permission' in Notification))
                      Notification.permission = permission;
              });
          }
          $("#zmtz").attr("checked","checked");
      }
}
 
 
 
    function send(title,theBody,theIcon)
    {
 
    var options = {
      body: theBody,
      icon: theIcon
    }
 
 
    if (!("Notification" in window)) {
 
    return ;
  }
 
 
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification(title,options);
  }
 
  // Otherwise, we need to ask the user for permission
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      // If the user accepts, let's create a notification
      if (permission === "granted") {
        var notification = new Notification(title,options);
      }
    });
  }
 
 
 
 
    }
    </script>
 
</head>
<body>
 
 
 
 
 
<div>
<input type="button" value="开启" onclick="javascript:init()">
通知内容:<input type="button" value="发喊单"  onclick="javascript:send('您有一条新喊单','详细信息','1.png')">
<input type="button" value="获取状态" onclick="javascript:alert(getStatus())">
</div>
 
 
 
 
 
 
 
</body>
</html>
原文地址:https://www.cnblogs.com/aliblogs/p/5493826.html