前端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.permission是default，你还让我显示。
• 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的通知助手中，等待用户查看。