浏览器桌面通知--Notification

前言

最近项目上要用到浏览器桌面通知,之前虽然知道有这个东西,但是一直没有用过,借此机会了解下桌面通知的机制,在此分享下.

1.权限

首先需要明确的是,不是所有网页都可以发桌面通知的,不然不得烦死,那么就需要在发送通知前需要用户来决定是否接收通知.我们可以通过使用 Notification.requestPermission()方法来获取权限,返回值有三种:

“granted”（状态值：0）表示用户同意消息提醒；

“default”（状态值：1）表示默认状态，用户既未拒绝，也未同意；

“denied”（状态值：1）表示用户拒绝消息提醒。

只有在状态值为0的时候才能够允许消息提醒，这个值保存在一个内部变量中，并且是只读的，通过checkPermission()方法可以提取到这个状态值,通过Notification.permission可以获取状态枚举(即granted,default,denied)三种

2.推送方法:

用户允许发送通知后,我们就可以创建一个Notification对象new Notification(title,options)来发送通知信息,具体参数如下:

说明:

title:通知标题

option:通知详情对象

dir:默认auto,配置文字阅读方向    ,可以是ltr,左到右, rtl 右到左,

lang:语言,一般用默认的就可以,需要修改的话去看API;

body:放在title下面的文本,用来展示通知内容;

tag:当前通知的标签;

icon:通知图标;

renotify:是否提出之前的通知

该方法返回一个Notification对象.

3.事件

我们可以为Notification对象示例绑定事件,来做一些响应操作

onclick  :单击通知

onerror:报错

onclose:关闭

onshow:展示

更多事件可以参考官方链接

4.浏览器支持

参考链接:

http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/

https://developer.mozilla.org/en-US/docs/Web/API/notification