2025-04-14
notification桌面通知

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div onclick="notifyMe()">点击显示通知</div>
    <script>
      function notifyMe() {
        // 先检查浏览器是否支持
        if (!('Notification' in window)) {
          alert('This browser does not support desktop notification')
        }

        // 检查用户是否同意接受通知
        else if (Notification.permission === 'granted') {
          // If it's okay let's create a notification
          var notification = new Notification('XX网站消息通知', {
            body: '你的朋友有新状态啦，快去围观吧！',
            tag: '2ue',
            icon: 'https://2ue.github.io/images/common/avatar.png',
            data: {
              url: 'https://2ue.github.io'
            },
            timestamp: 3000
          })
          notification.onerror = function () {
            console.log('HTML5桌面消息出错！！！')
          }
          notification.onshow = function () {
            setTimeout(function () {
              notification.close()
            }, 2000)
          }
        }

        // 否则我们需要向用户获取权限
        else if (Notification.permission !== 'denied') {
          Notification.requestPermission(function (permission) {
            // 如果用户同意，就可以向他们发送通知
            if (permission === 'granted') {
              var notification = new Notification('Hi there2!')
              notification.onerror = function () {
                console.log('HTML5桌面消息出错！！！')
              }
              notification.onshow = function () {
                setTimeout(function () {
                  notification.close()
                }, 2000)
              }
            }
          })
        }
      }
    </script>

    <script>
      const NotificationInstance = Notification || window.Notification
      if (!!NotificationInstance) {
        const permissionNow = NotificationInstance.permission
        if (permissionNow === 'granted') {
          //允许通知
          // CreatNotification()
        } else if (permissionNow === 'denied') {
          console.log('用户拒绝了你!!!')
        } else {
          setPermission()
        }
        function setPermission() {
          //请求获取通知权限
          NotificationInstance.requestPermission(function (PERMISSION) {
            if (PERMISSION === 'granted') {
              CreatNotification()
            } else {
              console.log('用户无情残忍的拒绝了你!!!')
            }
          })
        }
        function CreatNotification() {
          const n = new NotificationInstance('XX网站消息通知', {
            body: '你的朋友有新状态啦，快去围观吧！',
            tag: '2ue',
            icon: 'https://2ue.github.io/images/common/avatar.png',
            data: {
              url: 'https://2ue.github.io'
            }
          })
          n.onshow = function () {
            console.log('通知显示了！')
          }
          n.onclick = function (e) {
            //也可以通过访问回调参数e来获取data的数据
            window.open(n.data.url, '_blank')
            n.close()
          }
          n.onclose = function () {
            console.log('你墙壁了我！！！')
          }
          n.onerror = function (err) {
            console.log('出错了，小伙子在检查一下吧')
            throw err
          }
          setTimeout(() => {
            n.close()
          }, 2000)
        }
      }
    </script>

    <!-- 只支持https协议，本地使用http://localhost才有效果 -->
    <!-- 参数说明
{
  //通知显示正文。非必须，默认为空
  body: '你的好友XX上线了！',
  //通知显示正文的图片地址。非必须，默认为空
  image: 'imgae url',
  //通知左侧图标。非必须，默认为空
  icon: 'imgae url',
  //通知的分类标记（ID）。非必须，默认为空
  tag: 'test',
  //通知相关联的数据，通常用于方法的回调，传参。非必须，默认为空
  data: '可以是任意数据类型',
  //通知显示延迟的时间。非必须，默认通知实例创建完成就显示
  timestamp: '',
  //通知主体内容的水平展示顺序，有点类似direction属性。非必须，默认值是auto, 可以是ltr或rtl
  dir: 'auto',
  //当没有足够的空间来显示通知本身时，用于表示通知的图像的URL。非必须，默认为空
  badge: 'xxx',
  //通知的语言。非必须默认为空
  lang: '',
  //通知显示时，设备的振动模式。非必须，默认为空
  vibrate: [200, 100, 200],
  //新通知出现是否覆盖旧的通知，覆盖（true）则永远只显示一条通知，不覆盖（false）则会多条通知重叠。非必须，默认为true
  renotify: true,
  //通知是否静音。非必须，默认为false，表示无声
  silent: false,
  //通知声源文件地址。非必须，默认为空
  sound: 'mp3',
  //是否不在屏幕上显示通知信息。非必须，默认为false表示要显示
  noscreen: false,
  //指定通知是否应该粘滞性，即不容易被用户清理。非必须，默认false表示不具粘滞性
  sticky: false,
  //指定通知是否保持活性，知道用户点击或关闭。非必须，默认为false
  requireInteraction: false
} -->
  </body>
</html>
上次更新: 2025-12-04