位置: 编程技术 - 正文

使用 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)

  • 税法的分类都有什么
  • 长期借款到期一年怎么算
  • 水利建设专项收入的税率是多少?
  • 累计折旧可以直接计入主营业务成本吗
  • 资产负债表中其他流动资产包括哪些科目
  • 企业的党员活动有哪些
  • 股东捐赠给企业资金保壳
  • 收到货款确认收入但是后期开票了怎么做分录
  • 内部部门汇缴上级财务
  • 哪些发票无法全开
  • 公司承担了个人社保如何入账
  • 已经使用的固定资产其变动方式等基础资料将
  • 增值税普通发票几个点
  • 注册资本需要
  • 企业在什么情况下做薪酬诊断
  • 现金流量表右边
  • 企业所得税退税会计分录
  • 固定资产加速折旧方法
  • 所得税会计方法有哪几种
  • 银行借款用于在建工程
  • 企业所得税年报过了申报期还能修改吗
  • 定期存款计入什么科目
  • 个人所得税做账怎么做
  • 预付账款如何计提折旧
  • 2019年固态硬盘价格
  • 自查以前年度补税需调帐吗
  • linux 部署
  • smss.exe是干嘛的
  • 研发费用没有发票可以加计扣除吗
  • 企业最佳资金结构
  • 深入解析wordpress
  • 今日冬至有什么讲究吗
  • vue清空input file的值
  • 电子发票开出后如何查看
  • 电子发票的优点好处
  • 办公费用开专票可以抵扣吗
  • 理财产品怎么分类总结
  • sqlserver 中charindex/patindex/like 的比较
  • 做账的好处
  • 跨境电商财务如何报税
  • 收到员工社保
  • 实收资本(或股本)是什么意思
  • 费用减少利润减少的情况
  • 公司购买银行理财产品收益交什么税
  • 以前年度的固定资产入成原材料了怎么办
  • 自营工程领用自产产品的处理
  • 下乡扶贫可以报什么岗位
  • 公司注销留抵税额怎么做进项转出
  • 凭证扣除 28号
  • 接受其他企业现金捐赠会计分录
  • 总公司中标分公司结算可以吗
  • 银行对账单和银行流水的区别
  • sqlserver2012序列号
  • mysql有几种
  • ubuntu的sudo
  • linux磁盘分区表
  • linux readelf命令
  • centos8查看进程
  • windows8设置
  • winxp能玩啥大型游戏
  • 如何用dos破解wifi
  • windows7磁盘清理命令
  • preorder遍历
  • jquery的deferred
  • nodejs中的模块以及作用
  • lrucache算法
  • jquery 鼠标
  • 几个常用的微课网站
  • js判断页面是否跳出弹窗
  • javascript的用法
  • 手机截取电脑屏幕
  • 增值税红字发票怎么做账
  • 如何查询车辆购买的保险是哪家保险公司
  • 江苏省国税务局
  • 云南省新农合网上缴费app
  • 江苏省电子税务局怎么添加办税人员
  • 长期挂账的其他应付款的规定
  • 开票系统税控盘在哪里
  • 全国青少年学法网(官网)
  • 军人残疾证家属享受待遇吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设