HTML5之消息通知的使用(Web Notification)


Posted in HTML / CSS onOctober 30, 2018

关于 HTML5 ,写了不少文章,总觉得相关的高级 API 都得过一遍。系统的了解,站在更高的高度去思考问题,这样才能事半功倍。

一、先睹为快

我们先来尝试一个最简单的例子,打开 chrome 开发者工具,粘贴代码进去直接运行:

new Notification('Jartto\'s 消息通知', {
  dir: 'rtl',
  body: '这是一个消息,通过 Web Notification 发送,作为测试!',
  icon: 'https://raw.githubusercontent.com/chenfengyanyu/my-web-accumulation/master/images/logo.jpeg'
})

并没有出现什么消息通知,怎么回事?不要着急,接着往下看。

二、用户授权

按照上面的示例,我们运行了,但是并没有成功调起消息推送框。这时候需要查看一下是否用户授权,控制台输入: > Notification.permission

很快我们就会发现,原来用户许可是 default ,因为不知道用户的选择,所以浏览器的行为与 denied 时相同,即为拒绝。

三、兼容性

看到这些 HTML5 的高级 API ,总是会有一些顾虑。例子虽好,用起来也很方便,但是到底兼容性如何,这是一个值得思考的问题。

HTML5之消息通知的使用(Web Notification)

可以看到,基本上所有浏览器都支持了,除了 iOS SafariOpera Mini ,所以移动端应用需谨慎。

四、API 文档

我们先来系统性的梳理一下 API,很简单,花 5 分钟过一下。

用例:

let notification = new Notification(title, options)

参数:

title:一定会被显示的通知标题

options:一个被允许用来设置通知的对象。它包含以下属性:

  • dir : 文字的方向;它的值可以是 auto (自动), ltr (从左到右), or rtl (从右到左)
  • lang: 指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。
  • body: 通知中额外显示的字符串
  • tag: 赋予通知一个 ID ,以便在必要的时候对通知进行刷新、替换或移除。
  • icon: 一个图片的 URL ,将被用于显示通知的图标。

属性:

Notification.permission: 一个用于表明当前通知显示授权状态的字符串。可能的值包括:

  • denied (用户拒绝了通知的显示),
  • granted (用户允许了通知的显示),
  • default (因为不知道用户的选择,所以浏览器的行为与 denied 时相同)

方法:

  • Notification.onclick:处理 click 事件的处理,每当用户点击通知时被触发。
  • Notification.onshow:处理 show 事件的处理,当通知显示的时候被触发。
  • Notification.onerror:处理 error 事件的处理,每当通知遇到错误时被触发。
  • Notification.onclose:处理 close 事件的处理,当用户关闭通知时被触发。
  • Notification.requestPermission():用于当前页面想用户申请显示通知的权限。
  • Notification.close():用于关闭通知。

Notification.requestPermission 这个方法只能被用户行为调用(比如:onclick 事件),并且不能被其他的方式调用。

五、完整示例

按照上面 API ,我们来写一个完整的示例:

function notifyMe(){
  // 先检查浏览器是否支持
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // 检查用户是否同意接受通知
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

  // 否则我们需要向用户获取权限
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission){
      // 如果用户同意,就可以向他们发送通知
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }


  // 最后,如果执行到这里,说明用户已经拒绝对相关通知进行授权
  // 出于尊重,我们不应该再打扰他们了
}

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

HTML / CSS 相关文章推荐
css3实现背景模糊的三种方式
Mar 09 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
z-index不起作用
Mar 31 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 #HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 #HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 #HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 #HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 #HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 #HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 #HTML / CSS
You might like
是否存在第一台收音机的说法
2021/03/01 无线电
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
js实现转动骰子模型
2019/10/24 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
Python import与from import使用及区别介绍
2018/09/06 Python
Python 如何提高元组的可读性
2019/08/26 Python
python图形用户接口实例详解
2019/12/16 Python
python 通过文件夹导入包的操作
2020/06/01 Python
python怎么判断模块安装完成
2020/06/19 Python
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
Android面试宝典
2013/08/06 面试题
实习单位接收函
2014/01/11 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
业务员自荐信范文
2014/04/20 职场文书
借款协议书范本
2014/04/22 职场文书
统计专业自荐书
2014/07/06 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
超市收银员岗位职责
2015/04/07 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
java实现对Hadoop的操作
2021/07/01 Java/Android
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang