HTML5 Web Notifications解析

Posted on   |   In

1、 为什么要有Web Notification

过去网站给用户发送提醒的方式一般是写一个div放在右下角，通过AJax不断请求后台来获取推送消息。这种方式的问题在于如果用户的活动窗口是其它页面，用户并不能发现有一条推送消息。比如你打开了GMail，但你这个时间在天猫上浏览器商品，如果这时候来了一封邮件你是无法知道。而Web Notification正是为解决这个问题而诞生的。通过Web Notification发送的提醒可以无视当前活动窗口是哪个，只要浏览器是运行的，用户都能在一个明显的地方看到通知。

2、 一条Notification的生命周期

  • 1、检查浏览器是否支持Web Notifications
  • 2、检查该网站是否已经获取通知权限，若没有，则弹出权限请求提醒
  • 3、创建消息
  • 4、显示消息
  • 5、手动，自动关闭消息

3、 API

3.1 构造函数

1
Notification.Notification()

3.2 属性

3.2.1 静态属性

1
Notification.permission

属性的值有3种：
default：permission的默认值，表示网站还没有请求过发送通知的权限或者发送过但被用户忽略
granted：表示网站已经获取到发送通知的权限
denied：表示拒绝网站向用户发送通知消息

3.2.2 实例属性

1
Notification.title

通知的标题

1
Notification.dir

通知出现的方向

1
Notification.lang

通知的语言

1
Notification.body

通知的主体

1
Notification.icon

通知的图标

1
Notification.slient

4、参考文档

W3 Web Notifications
MDN Notifications