使用 Javascript 实现浏览器推送提醒功能的示例

所属分类: 网络编程 / JavaScript 阅读数: 1984
收藏 0 赞 0 分享

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

Notification 类

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

请求权限

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

Notification.requestPermission().then(permission => {
  console.log(permission)
})

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

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

查看权限

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

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

Notification.permission

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

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

发起一条推送

const note = new Notification (title, opts)

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

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

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

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

点击推送事件

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

note.onclick = () => {
  //在这里实现用户点击后的逻辑
}

其他

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多