H5 认识桌面通知 - Notification

最新推荐文章于 2024-05-05 20:57:21 发布

等下吃什么？

最新推荐文章于 2024-05-05 20:57:21 发布

阅读量852

点赞数

分类专栏： Html5 文章标签：前端 html5

本文链接：https://blog.csdn.net/weixin_44240581/article/details/121230397

版权

桌面通知 JavaScript 浏览器兼容性用户授权事件处理

关键词由CSDN通过智能技术生成

Html5 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <button onclick="getPermission()">
    获取通知权限
  </button>
</body>
</html>

<script>
  // 检测浏览器是否支持
  if (!("Notification" in window)) {
    alert("抱歉，此浏览器不支持桌面通知！");
  }

  // 检查用户是否同意接受通知
  if (Notification.permission === "granted") {
    setTimeout(() => sendMsg(), 4000)
  } else {
    getPermission();
  }

  // 获取授权
  function getPermission() {
    Notification.requestPermission().then(function(permission) {

      if (permission === 'default') {
        console.log('用户未授权');
      }
      else if (permission === 'denied') {
        console.log('用户拒绝');
      }
      else if (permission === "granted") {
        console.log('用户同意通知')
        setTimeout(() => sendMsg(), 4000)
      }
    });
  }

  function sendMsg() {
    let notification = null;
    const title = "巨蟹座-00年";
    const options = {
      dir: "auto",                                                             // 文字方向
      body: "这是我的好姐妹，可以介绍给你",                                     // 通知主体
      icon: "https://gitee.com/Wzhichao/img/raw/master/uPic/QlkqKm47%20.jpg", // 通知图标
    };

    /**
     * @param {string} title    - 通知标题
     * @param {object} options
                         dir    - [auto, ltr, rtl] 通知方向
                         lang   - 通知的语言
                         body   - 标题正文，显示在标题下方
                         tag    - 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
                         icon   - 一个图片的URL，将被用于显示通知的图标
     * */
    notification = new Notification(title, options);

    notification.onshow = function() {
      console.log('通知显示')
    }

    // 点击会把与notification相关联的页面，展示在最前 todo 谷歌http下没反应，尝试使用https
    notification.onclick = function(e) {
      console.log('点击通知')

      // 禁止点击后 页面展示在最前的默认行为
      // e.preventDefault();

      // 打开新标签页
      // window.open('https://developer.mozilla.org/zh-CN/docs/Web/API/notification/onclick', '_blank');
    }

    // 通知会在几秒后自动关闭，自动或手动关闭通知触发 todo 谷歌http下没反应，尝试使用https
    notification.onclose = function() {
      console.log('关闭通知')
    }

    // 谷歌本地运行会触发，不会执行onshow、onclick、onclose
    notification.onerror = function() {
      console.log('通知异常')
    }
  }

  /*
    实例属性
      Notification.title 只读 (moz only)
      Notification.dir   只读
      Notification.lang  只读
      Notification.body  只读
      Notification.tag   只读
      Notification.icon  只读
  * */

  /*
    事件处理
      onclick: 当用户点击通知时被触发
      onshow:  当通知显示的时候被触发
      onerror: 当通知遇到错误时被触发
      onclose: 当用户关闭通知时被触发

      Notification.close() 关闭一个以前显示的通知
  * */
</script>

在这里插入图片描述

等下吃什么？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5 认识桌面通知 - Notification

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <button onclick="getPermission()"> 获取通知权限 </button></body></html><
复制链接

扫一扫

专栏目录