vue实现浏览器桌面通知的示例代码

 更新时间:2023年1月10日 15:10  点击:746 作者:蜗牛与藤曼

浏览器桌面通知:当浏览器最小化,或者切换到其他标签页不在当前系统页面,或在其他页面时依然可以显示通知

*使用前注意:生产环境地址必须为https协议,开发环境可以用localhost IP地址,且必须允许显示通知才能显示桌面通知
*存在兼容性问题,不同系统不同浏览器甚至不同版本浏览器效果略有不同

方案一: H5 JavaScript Web Notification API

Notification官网
目前Notification除了IE浏览器不支持外, 其他浏览器都已支持桌面通知,移动端浏览器基本都未支持

      // 判断是否支持显示
      showJudge (data) {
        if (!('Notification' in window)) {
          alert('抱歉,此浏览器不支持桌面通知!')
        }
// granted: 用户允许该网站发送通知 default: 默认值,用户还未选择 denied: 用户拒绝该网站发送通知
// Notification.permission === 'granted' 可用于检测用户通知权限
        Notification.requestPermission().then((result) => {
          if (result === 'denied') {
            console.log('用户拒绝')
            return
          } else if (result === 'default') {
            console.log('用户未授权')
            return
          }
          this.sendMesgToDesk(data)
        })
      },
      // 显示消息通知
      sendMesgToDesk (data) {
        let notification = null
        let title = data.data.auditTitle
        let str1 = data.data.applicant + ' ' + data.data.applyTime
        let options = {
          tag: data.data.wfFormId, // 多条消息时tag相同只显示一条通知,需要显示多条时tag一定要不同,(谷歌每次只能显示一条,火狐可以显示多条)
          body: str1, // 通知主体
          data: { // 可以放置任意数据,方便后续使用
            content: data.data,
            originUrl: `http://localhost:8889/#/home`
          },
          requireInteraction: true, // 不自动关闭通知 默认值为false,通知会在三四秒之后自动关闭,(谷歌有用,火狐依然会自动关闭)
          image: require('../../../assets/img/AAA.png'), // 通知上方可显示需要展示的大图
          icon: require('../../../assets/img/XXX.png') // 通知图标 默认是浏览器图标
        }
        notification = new Notification(title, options)
        // 事件处理
        notification.onclick = ({ currentTarget: { data } }) => {
          // notification.close() 单个通知关闭
          window.focus()
          // 默认进入系统之前打开的页面,也可以这里自定义进入的页面
          window.location.href = data.originUrl
        }
        notification.onshow = () => {
          console.log('通知显示了')
        }
        notification.onclose = () => {
          console.log('通知被关闭了')
        }
        notification.onerror= () => {
          console.log('遇到错误')
        }
      },

方案二: push.js 工具 (基于notification)

push官网

一、引入

1.script引入方式

<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>

2.npm安装引入

npm install push.js --save

引入

import Push from 'push.js'
// 如果全局使用在main.js引入后,进行挂载:
Vue.prototype.Push = Push

二、主要代码

  // 手动获取用户桌面通知权限
  if (this.Push.Permission.GRANTED) { // 判断当前是否有权限,没有则手动获取
    this.Push.Permission.request()
  }
  // 监听浏览器 当前系统是否在当前页
  document.addEventListener('visibilitychange', () => {
    if (!document.hidden) {   // 处于当前页面
    // 关闭之前的消息通知,清空
      this.Push.clear()
      this.notificationArr = []
    }
  })

	// 发送 浏览器 桌面通知
      showDeskNotify (data) {
        if (!this.Push.Permission.has()) {
          alert('抱歉,此浏览器不支持桌面通知!')
          return
        }
        // 关闭之前的消息通知
        this.Push.clear()
        let title = '消息通知(' + (this.auditMessageArr.length + 1) + '条未读)'
        this.Push.create(title, {
          tag: data.data.wfFormId,
          body: '类型:' + data.data.auditTitle + '\n时间:' + data.data.applyTime,
          requireInteraction: true,
          icon: require('../../../assets/img/XX.png'),
          onClick: () => {
            window.focus()
            // this.close() // 单个关闭
            this.Push.clear() // 全部关闭
            // window.location.href = data.originUrl
          }
        })
      },

方案三: iNotify.js JS

JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统通知

1.npm安装引入

npm install title-notify --save

2.主要代码

var iNotify = new iNotify().init()
//推荐下面写法
var iNotify = new iNotify({
    message: '有消息了。',//标题
    effect: 'flash', // flash | scroll 闪烁还是滚动
    openurl:"http://www.bing.com", // 点击弹窗打开连接地址
    onclick:function(){ //点击弹出的窗之行事件
       console.log("---")
    },
    //可选播放声音
    audio:{
        //可以使用数组传多种格式的声音文件
        file: ['msg.mp4','msg.mp3','msg.wav']
        //下面也是可以的哦
        //file: 'msg.mp4'
    },
    //标题闪烁,或者滚动速度
    interval: 1000,
    //可选,默认绿底白字的  Favicon
    updateFavicon:{
        // favicon 字体颜色
        textColor: "#fff",
        //背景颜色,设置背景颜色透明,将值设置为“transparent”
        backgroundColor: "#2F9A00"
    },
    //可选chrome浏览器通知,默认不填写就是下面的内容
    notification:{
        title:"通知!",//设置标题
        icon:"",//设置图标 icon 默认为 Favicon
        body:'您来了一条新消息'//设置消息内容
    }
})

3.其他

判断浏览器弹框通知是否被阻止。

  iNotify.isPermission()

播放声音

 iNotify.player() 
 // 自动播放
 iNotify.loopPlay()

停止播放

iNotify.stopPlay()

设置播放声音URL

iNotify.setURL('msg.mp3')// 设置一个
iNotify.setURL(['msg.mp3','msg.ogg','msg.mp4']) // 设置多个

添加计数器

iNotify.addTimer()

清除计数器

 iNotify.clearTimer()

到此这篇关于vue实现浏览器桌面通知的示例代码的文章就介绍到这了,更多相关vue 浏览器桌面通知内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!

原文出处:https://blog.csdn.net/qq_40407998/article/details/128562596

[!--infotagslink--]

相关文章

  • vue中activated的用法

    这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
  • 基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能

    这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23
  • Antd-vue Table组件添加Click事件,实现点击某行数据教程

    这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17
  • Vue组件跨层级获取组件操作

    这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
  • vue 实现动态路由的方法

    这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
  • antdesign-vue结合sortablejs实现两个table相互拖拽排序功能

    这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09
  • vue 获取到数据但却渲染不到页面上的解决方法

    这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
  • Vue基于localStorage存储信息代码实例

    这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
  • vue项目页面嵌入代码块vue-prism-editor的实现

    这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30
  • Vue 3.0中jsx语法的使用

    这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
  • vue Treeselect下拉树只能选择第N级元素实现代码

    这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
  • vue项目多环境配置(.env)的实现

    最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
  • vue实现同时设置多个倒计时

    这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
  • Vue select 绑定动态变量的实例讲解

    这篇文章主要介绍了Vue select 绑定动态变量的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-23
  • Ant design vue table 单击行选中 勾选checkbox教程

    这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25
  • vue实现div单选多选功能

    这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
  • vue接口请求加密实例

    这篇文章主要介绍了vue接口请求加密实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
  • Vue生命周期activated之返回上一页不重新请求数据操作

    这篇文章主要介绍了Vue生命周期activated之返回上一页不重新请求数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26
  • 解决vue的router组件component在import时不能使用变量问题

    这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27
  • vue中的插槽详解

    这篇文章主要介绍了Vue中的插槽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-10-19