HTML5中的Web Notification桌面消息推送

最新推荐文章于 2021-06-03 12:47:53 发布

我不爱编程

最新推荐文章于 2021-06-03 12:47:53 发布

阅读量427

点赞数

分类专栏：前端文章标签： H5 Web Notification

本文链接：https://blog.csdn.net/weixin_39475476/article/details/88866316

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

开篇注意事项：1.目前该特性仅支持版本比较新的火狐或者谷歌浏览器

用法：

消息推送-主要通过window.Notification.permission来判断

"denied" --- 为用户点击了禁用(拒绝打开推送功能)

"default" ----推送功能默认关闭

"granted" ----推送功能为开启状态(用户点击允许后的状态)

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<a onclick="showNotification();">点我</a>

<script>
function showNotification() {
  if (!window.Notification) {
    alert("浏览器不支持通知！");
  };
  //permission只读属性:
  //  default 用户没有接收或拒绝授权 不能显示通知
  //  granted 用户接受授权 允许显示通知
  //  denied  用户拒绝授权 不允许显示通知
  var permission = window.Notification.permission;
  console.log('permission: ' + permission);
  if (permission!="granted") {
    Notification.requestPermission(function (status) {  
   //status是授权状态，如果用户允许显示桌面通知，则status为'granted'
      console.log('status: ' + status);
    });
  }
  var notification = new Notification("您有一条消息！",{
      "icon": "https://avatar.csdnimg.cn/2/8/6/1_weixin_39475476.jpg",
      "body": "嘿,我在这儿~",
  });
  notification.onshow = function () {
    console.log("显示通知");
    setTimeout(()=>{ notification.close() }, 2000);
  };
  notification.onclick = function () {
    console.log("打开相关视图");
    window.open("https://blog.csdn.net/weixin_39475476/article/details/88866316");
    notification.close();  };
  notification.onclose = function () {
    console.log("通知关闭");
  };
  notification.onerror = function () {
    console.log('异常');
    //do something useful
  };
};
</script>
</body>
</html>

我不爱编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5中的Web Notification桌面消息推送

开篇注意事项：1.目前该特性仅支持版本比较新的火狐或者谷歌浏览器用法：消息推送-主要通过window.Notification.permission来判断"denied" --- 为用户点击了禁用(拒绝打开推送功能)"default" ----推送功能默认关闭"granted" ----推送功能为开启状态(用户点击允许后的状态)<!DOCTYPE html>...
复制链接

扫一扫

专栏目录