位置: 编程技术 - 正文

使用 Javascript 实现浏览器推送提醒功能的示例(js怎么用)

编辑:rootadmin

推荐整理分享使用 Javascript 实现浏览器推送提醒功能的示例(js怎么用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript运用,js应用实例,js如何使用,js怎么使用,如何用javascript,js如何使用,如何用javascript,javascript怎么用,内容如对您有帮助,希望把文章链接给更多的朋友!

本篇文章内容简单,速读只需两三分钟,通过这两三分钟的时间你就可以给自己的网站实现推送提醒的功能

Notification 类

简单明了,这个类就是负责推送消息的,只要用户当前没有关闭页面,及时是在使用其他程序,浏览器也能够将消息推送给用户

请求权限

我们在手机上都收到过消息推送,在接收推送之前我们会先将消息推送权限开放给应用。在浏览器中也一样,在使用浏览器推送之前,需要先获取权限

通过 requestPermission 方法可以为当前域名请求消息推送的权限,这个方法可以使用 Promise 语法来实现请求结果的处理。当然,你也可以使用回调的方式来实现

回调的参数 permission 表示当前请求后用户的选择:允许推送 / 不允许推送,它的值也分别有两个 granted / denied,当我们发现用户不允许的推送的时候,就可以在回调中做出相应的提示,告诉用户可能会导致不能及时接收消息,并且告诉用户如果想要接收消息该如何操作等

查看权限

由于推送的权限是基于域名的,因此同一个网站在请求一次权限后,下一次打开时就不会再次请求,而是直接通过第一次的用户选择来决定网站是否能向用户推送

使用 Javascript 实现浏览器推送提醒功能的示例(js怎么用)

因此我们就需要能够获取到当前网站的推送的状态,可以通过下面的这个属性来获取状态:

permission 属性的值有三种:granted - 允许推送;denied - 拒绝推送;default - 还未申请权限

当值为 default 时,我们就可以向用户请求推送的权限了

发起一条推送

通过上面的方式可以声明一条推送,它有两个参数,第一个参数是消息的标题,这个是必填的一个参数;而通过第二个选填参数,我们则可以实现更多自定义的显示内容:

第二个参数接收一个对象,它有一下几个属性:

body:推送的主体内容 tag:推送的标识,如果我们声明了多个 Notification,而这些推送的 tag 都相同,则只会推送一次 icon:需要在推送中显示的图标的 URL data:推送的消息所带有的数据信息,当用户点击推送窗口时,可以通过这些信息为用户展示相应的内容 requireInteraction:正常情况下,推送发出后若用户没有操作,几秒后就会消失,而将该属性设为 true 则可以让推送始终维持而不消失,默认值是 false

当我们需要自定义推送显示时长的时候,可以通过最后一个属性将自动消失关闭,然后配合 note.close() 和 setTimeout 方法人为控制推送时长

点击推送事件

既然已经可以成功的发起一条推送,那么该如何监听到用户是否点击了这个推送呢?很简单,通过 onclick 属性就可以实现

其他

需要注意的是,并不是所有浏览器都支持 Notification,所以在使用前需要先检测能否使用

或许有的小伙伴会想,这个功能不错,这样在手机上也能实现网页消息推送了。然而很不幸的是,移动端浏览器几乎%不支持 Notification :(

标签: js怎么用

本文链接地址:https://www.jiuchutong.com/biancheng/369723.html 转载请保留说明!

上一篇:React.Js添加与删除onScroll事件的方法详解(react增删改查功能)

下一篇:原生JavaScrpit中异步请求Ajax实现方法(原生java web)

  • 所得税结转本年利润
  • 什么是税法要素
  • 退回的所得税与增值税的财务处理?
  • 申报增值税附加税减免项目选错了
  • 其他应付款借方余额怎么调整
  • 金税四期上线后还需要会计吗
  • 售后维修收入怎么入账
  • 预提费用报税时填哪里
  • 公共部门管理中具有哪些作用
  • 迟延履行利息记什么科目?
  • 发给职工的福利要交个税吗
  • 福利费结转以后年度
  • 投资收益账户月末结转余额吗?
  • 一般纳税人增值税申报操作流程
  • 提成工资可以扣发吗?
  • 企业注销后资产如何处置
  • 税控服务费抵扣的文件
  • 个人所得税福利费免税范围
  • 毛利润率的计算公式举例
  • 总资产减少率怎么算
  • 福利费进项税额转出会计分录
  • 银行端查询缴税凭证在哪里缴费
  • 发票开负数冲红做什么会计分录?
  • 没有及时去做财务会计制度备案怎么办?
  • 资产总额是资产负债表中的哪个数
  • 五联折叠票和两联折叠票的区别
  • 金三接口调用失败怎么办?
  • 增值税应税劳务的纳税人是什么意思
  • 劳务人员劳务费
  • macbook怎么修改默认系统
  • php小程序开发完整教程
  • 收到股东垫付款的会计分录
  • PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
  • 因质量问题被扣的货款销售方怎么做账
  • isahelp是什么进程
  • 金融负债的范围
  • php二分查找算法两种方法
  • explore.exe
  • php提高性能
  • php that
  • 烟草企业亏损
  • 出售无形资产计入
  • 携程境外电话客服人工电话
  • php中实现文件上传需要用到哪几个函数
  • 中医门诊免增值税吗
  • elementui中文网
  • 深度学习中正样本、负样本、简单样本、困难样本的区别 (简单易懂)
  • vue文件下载功能
  • 帝国cms如何卸载应用
  • 零申报一定要有员工吗
  • 成本核算方法是指
  • 小规模企业跨月发票如何冲红
  • 什么时候库存商品在贷方
  • 公允价值怎么读
  • 应收在借方什么意思
  • 结转以后年度抵免的境外所得税怎么进行会计处理
  • 劳务派遣的公司值得去吗
  • 加油票和过桥过路费怎么做账
  • 母公司与子公司税务关系
  • 财务费用是负数什么意思
  • 专项应付款科目编码是多少
  • 契税发票错了能作废吗
  • 出纳 记账凭证
  • 利息收入的正确分录凭证怎么写
  • 242104 税控盘
  • 美国支票名字不一致
  • 汽车属于固定资产吗?如何计提折旧
  • 财务费用包括哪几项
  • 自己动手在家就可以自己理发视频
  • u盘如何安装win7系统
  • igfxsrvc module
  • wind安装
  • 注册表cmd
  • 狗刨好学吗
  • 测试下载速度很快,实际下载很慢
  • 隐藏磁盘空间
  • JavaScript中的math.pi
  • js类的静态属性
  • 银行人员司法查询给查错了,怎么办
  • 2024年深圳房价
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设