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


Posted in Javascript onNovember 03, 2017

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

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 :(

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

Javascript 相关文章推荐
jQuery select的操作实现代码
May 06 Javascript
Jquery iframe内部出滚动条
Feb 11 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 #Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 #Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 #Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 #jQuery
nginx配置React静态页面的方法教程
Nov 03 #Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 #Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 #Javascript
You might like
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
简单的PHP缓存设计实现代码
2011/09/30 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
养殖人员的创业计划书范文
2013/12/26 职场文书
学校七一活动方案
2014/01/19 职场文书
产品生产计划书
2014/05/07 职场文书
企业承诺书格式范文
2015/04/28 职场文书