首页 > 其他分享 >vue 浏览器通知

vue 浏览器通知

时间:2024-01-24 15:56:28浏览次数:22  
标签:vue 浏览器 target 通知 notificationInstanceArr instance task notification const

noticeRemind(target) {       const notificationInstanceArr = []       // const notificationAudio = new Audio('https://img-fe.tengzhihh.com/audio/c58fb135c2546f.mp3')       const handleMessageFocus = (target) => {         // 可以在这里 根据新消息target,处理展示具体会话逻辑           // 展示原有页面         window.focus()         // 删除点击的会话通知         for (let i = 0; i < notificationInstanceArr.length; i++) {           if (notificationInstanceArr[i].task_id === target.task_id) {             notificationInstanceArr[i].instance.close()             notificationInstanceArr.splice(i, 1)             i--           }         }       }       if (!('Notification' in window)) {         console.log('浏览器不支持消息通知')         return       }       // 创建配置项       const options = {         body: '您有新的未读消息', // 展示内容         silent: false, // 是否静音         lang: 'ZH',         sticky: true, // 是否粘性展示,不轻易被清理         // renotify: true, // 弹窗内容更新,是否重新通知,需与tag搭配使用         requireInteraction: true // 是否保持,不自动关闭       }       // 检查权限是否已获取 已获取为granted       if (Notification.permission !== 'granted') {         // 未允许权限,则申请权限         Notification.requestPermission(function(status) {           if (status === 'granted') {             // 创建提醒             const notification = new Notification(target.task_content, options)             // 设置点击事件             notification.onclick = function() {               handleMessageFocus(target)             }             // 存储通知实例,保留最新三个             if (notificationInstanceArr.length === 3) {               const instance = notificationInstanceArr.shift()?.instance               instance?.close()             }             notificationInstanceArr.push({               task_id: target.task_id,               instance: notification             })             // 播放通知音频             // notificationAudio?.play()           }         })       } else {         // 已有权限,重复操作即可         const notification = new Notification(target.task_content, options)         notification.onclick = function() {           handleMessageFocus(target)         }         if (notificationInstanceArr.length === 3) {           const instance = notificationInstanceArr.shift()?.instance           instance?.close()         }         notificationInstanceArr.push({           task_id: target.task_id,           instance: notification         })         // notificationAudio?.play()       }     }

标签:vue,浏览器,target,通知,notificationInstanceArr,instance,task,notification,const
From: https://www.cnblogs.com/babyone/p/17984863

相关文章

  • Vue 动态加载本地图片 404 的问题
    今天在vue文件中动态引入本地图片时发现路径没有问题但是一直404template部分如下,使用v-for动态加载,数据存储在setup中的nearbyItems数组内<template><divclass="nearby"><divclass="title">附近店铺</div><divv-for="iteminnear......
  • Web即时消息通知的实现
    Web即时消息通知,可以使用轮询,长轮询和SSE或Socket。比较成熟的方法是长轮询,SSE和Socket都受到客户端或服务器端的约束。本文以长轮询为主题简介如何实现长轮询。将消息抽象为Message:NameData和Id,Name必须,Data和Id可选。使用im订阅服务器的消息。参数包含a|b&c,其中a|b是为......
  • 使用rpa打开浏览器并执行js抓取页面元素详情步骤
    这里我们专门开一个文章来写如何在rpa中执行js获取页面元素。个人觉得,复杂点的需求用js会方便很多,所以后续的文章我都会重点使用js去获取页面元素。好,正文开始,我们先看一下rpa为我们提供的自带的方便的抓取元素的方式,我们还是以小红书为例,还是以上一个例子为例,上个例子我们使......
  • vue print.js 批量打印功能
    批量打印 :1.用到print.js  自行安装  安装完成后 引用  importprintJSfrom'print-js';2.用到深拷贝深拷贝代码:(可以将此代码放在一个页面中,对此进行引用即可,例如:放在until文件中,引用代码 import{deepClone}from'@/utils/index')exportfunctiondeepClone......
  • vue3 axios 封装
    一、介绍二、代码三、问题 一、介绍Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。这里介绍的是在vue3中怎么封装二、代码1.基本使用1.1安装npminstallaxios1.2简单使用1.2.1局部使用importaxiosfrom'axio......
  • UniApp Vue3 动态表单
    左侧手机部分为动态表单内容,右侧为提交后获取到表单的值。页面代码:<viewstyle="margin:15px;padding:10rpx;"><tn-formlabel-position="top"ref="formRef":model="formData":rules="formRules"><tn-for......
  • vue index.html缓存解决
    Vue项目的index.html文件在部署到生产环境时,很容易受到浏览器缓存影响,导致用户无法看到最新的页面。为了解决这个问题,有几种方法:使用版本号:在构建项目时,设置打包后的文件名中包含版本号,比如index.html?v=1.0,每次更新版本号即可避免缓存问题。使用meta标签:在index.htm......
  • 记录--Vue中的$attrs你真的会用吗?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助先来看一个业务需求:项目经常会遇到产品经理要求你做某组件一样的功能,还要在它的基础上增加东西。如何只用少量代码高效的二次封装组件呢?例如我要做一个element-ui的input组件进行封装,以下是封装要求:对el-input......
  • Vue与微信小程序开发时的区别
    Vue与微信小程序开发时的区别一,生命周期vue:跳转页面时,钩子函数都会被重新出发一次,每次进入页面所有得钩子函数都会被触发一次小程序:onload()一个页面只会被加载一次,可以在onLoad中获取打开当前页面所调用的query参数。onShow():每次打开页面都会调用一次。二、数......
  • vue2 组件的使用
    基本使用写组件......