前端HTML5桌面通知

一、引入

Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息。该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来。通过这种方式,就可以利用浏览器来为用户推送消息啦。FaceBook的web版本,就已经应用了这个新特性。

**注意:**这个H5特性兼容性,不是特别好。建议在新版chrome,Firefox,Safari上使用。

二、用户授权

想要向用户显示通知消息,需要获取用户权限,而相同的域名只需要获取一次权限。只有用户允许的权限下,Notification 才能起到作用,避免某些网站的广告滥用 Notification 或其它给用户造成影响。

  • Notification.permission 该属性用于表明当前通知显示的授权状态,可能的值包括:
    • default :不知道用户的选择,默认。
    • granted :用户允许。
    • denied :用户拒绝。
  • 请求权限:
Notification.requestPermission().then(function(permission) {
    if(permission === 'granted'){
        console.log('用户允许通知');
    }else if(permission === 'denied'){
        console.log('用户拒绝通知');
    }
});

**注意:**chrome用户授权只有一次,首次后使用时会触发,如果用户拒绝后期将不再弹出权限获取提示。只能去chrome中手动修改通知权限。

三、使用弹窗

1.显示弹窗

var notification = new Notification(title, options)
  • title:通知的标题
  • options:通知的设置选项(可选)。
    • dir:表示提示主体内容的水平书写顺序。
    • body:通知的内容。
    • tag:代表通知的一个识别标签,相同tag时只会打开同一个通知窗口。
    • icon:要在通知中显示的图标的URL。
    • image:要在通知中显示的图像的URL。
    • data:想要和通知关联的任务类型的数据。
    • vibrate:通知显示时候,设备震动硬件需要的振动模式。所谓振动模式,指的是一个描述交替时间的数组,分别表示振动和不振动的毫秒数,一直交替下去。例如[200, 100, 200]表示设备振动200毫秒,然后停止100毫秒,再振动200毫秒。
    • renotify:布尔值。新通知出现的时候是否替换之前的。如果设为true,则表示替换,表示当前标记的通知只会出现一个。注意都这里“当前标记”没?没错,true参数要想其作用,必须tag需要设置属性值。
    • silent:布尔值。通知出现的时候,是否要有声音。默认false, 表示无声。
    • sound:字符串。音频地址。表示通知出现要播放的声音资源。
    • 其他不常用属性参考官方文档

2.隐藏弹窗

Notification.close()

3.对应事件

  • Notification.onclick
    点击通知,然后……
  • Notification.onerror
    通知显示异常,然后。例如,明明Notification.permissiondefault,你还让我显示。
  • Notification.onclose
    通知关闭了,然后…… 无论是用户手动关闭,还是直接Notification.close()关闭都会触发该该事件。
  • Notification.onshow
    通知显示的时候,该干嘛干嘛~~

四、业务应用

1.页面必须要上线

页面测试中,发现本地文件打开的网页将不会触发弹窗,而是不停地跳出用户授权弹窗。这是因为,chrome在记录弹窗权限时,会绑定到域名上,在使用本地文件打开时,没有对应的域名,没法保存授权信息,所有浏览器会不停地进行授权弹窗。

2.使用HTTPS

在服务器上,使用http发现页面不会弹出弹窗,有一个黄色的警告信息。

[Deprecation] The Notification API may no longer be used from insecure origins. You should consider switching your application to a secure origin, such as HTTPS.

要使用这个必须要使用https进行配置。

3.window设置中要允许通知

浏览器毕竟是依存在操作系统中,window设置中的通知模块,必须要允许chrome进行通知,我们才可以收到通知。注意:在打开window的专注助手后,通知不会跳出,而会被立刻关闭,然后放置到window的通知助手中,等待用户查看。

你可能感兴趣的:(前端HTML5桌面通知)