前端开发桌面通知功能

最新推荐文章于 2023-12-16 08:37:17 发布

xiaokuangren_

最新推荐文章于 2023-12-16 08:37:17 发布

阅读量116

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/xiaokuangren_/article/details/132148455

版权

前提

1.	项目必须是https
2.	需要开启浏览器通知

在这里插入图片描述

代码

// 关于Notification API附上地址
链接: [link](https://developer.mozilla.org/zh-CN/docs/Web/API/notification/icon)
	createNotify (title, options, notice) {
      try {
        console.log('执行了createNotify方法', Notification)
        if (Notification.permission === 'granted') {
          this.notify(title, options, notice.busUuid)// 发起通知
        } else if (Notification.permission === 'default' || Notification.permission === 'denied') {
          // 如果用户未被询问授权，先发起权限请求，同意后再发通知
          Notification.requestPermission((res) => {
            if (res === 'granted') {
              this.notify(title, options, notice.busUuid) // 发起通知
            }
          })
        }
      } catch (error) {
        console.log(error)
      }
    },
    notify ($title, $options, notice) {
      try {
        let notification = new Notification($title, $options)
        notification.onshow = function (event) {
        }
        notification.onclose = function (event) {
        }
        notification.onclick = (event) => {
          window.focus()
          notification.close()
        }
      } catch (error) {
        console.log(error)
      }
    },