HTML5桌面通知：notification api

时间 2019-11-20

标签 html5 html 桌面通知 notification api 栏目 HTML5 繁體版

原文原文链接

1. 为何须要HTML5的桌面通知

传统的桌面通知能够写一个div放到页面右下角自动弹出来，并经过轮询等等其余方式去获取消息并推送给用户。这种方式有个弊端就是：当我在使用京东进行购物的时候，我是不知道人人网有消息推送过来给个人，而必需要等我把当前页面切到人人网才知道有消息推送了。这种方式的消息推送它是基于页面存活的，可是咱们须要这么一种策略：不管你在看哪一个页面，只要有消息都应该能推送给我看到，这就是webkitNotification要解决的问题。 Notification生成的消息不依附于某个页面，仅仅依附于浏览器。javascript

2. 一个桌面通知生成的正常流程

咱们先来看看一个桌面通知是如何生成的：html

检查浏览器是否支持Notification

检查浏览器的通知权限（是否容许通知）

若权限不够则获取浏览器的通知权限

建立消息通知

展现消息通知
NOTE: 关于第一点的说明须要作一些说明，Notification目前尚未标准化，因此目前只支持chrome19+和safari6+；网上有资料显示Firefox26+也支持，可是我拿个人Firefox27检测的结果是没法支持。

3. notification api基础说明及代码示例

目前notification的实现有两种：一种是以前草案中的形式：webkitNotifications对象, 另外一种就是将来标准化的形式:Notification对象。首先来讲一下webkitNotifications所包含的内容：html5

3.1 webkitNotifications：

3.1.1. 静态方法

 
         window.webkitNotifications.checkPermission() 
        
         //该方法返回0, 1, 2三个值，0表明PERMISSION_ALLOWED,即’容许’；1表明PERMISSION_NOT_ALLOWED，即不容许；2表明PERMISSION_DENIED，即拒绝 
        
         window.webkitNotifications.requestPermission() 
        
         //调用该方法将会在浏览器的信息栏弹出一个是否容许桌面通知的提醒，该方法只能由用户主动事件触发，如click 或 mouse over，也就是说你不能在document.ready里面直接调用该方法。 
        
         window.webkitNotifications.createNotification( 
         'icon-url' 
         , 
         'title' 
         ,  
         'body' 
         ) 
        
         //调用该方法将返回一个实例化的webkitNotifications对象

PS:调用以上方法都会存在安全异常，也就是当前页面的permission是否为0。java

3.1.2. 实例方法

 
         notificationInstance.show() 
        
         //调用该方法将在右下角弹出一个通知窗口 
        
         notificationInstance.cancel() 
        
         //调用该方法将关闭通知窗口

3.2 Notification:

在chrome26+ 终端里面输入window.Notification并键入回车键，会发现这东西它也是存在的，根据某些博客的说法，这个Notification会是 webkitNotifications的标准化形态（传说中的进化），这种方式的实现相对于webkitNotifications的实现更简洁，更面向对象一些。 构造函数： web

 
         Notification(title, options) 
        
         //@param {String} title 要显示的通知标题 
        
         //@param {Object} options 备选项参数，键值对 
        
         //option 结构以下 
        
         dictionary NotificationOptions { 
        
         NotificationDirection dir =  
         "auto" 
         ; 
        
         DOMString lang =  
         "" 
         ; 
        
         DOMString body; 
        
         DOMString tag; 
        
         DOMString icon; 
         //在实例化的时候会异步的去获取 
        
         };

 
         //新建一个Notification实例,并根据permission为'granted'来完成notification的显示 
        
         var 
         notification =  
         new 
         Notification( 
         'Hello Notification' 
         ,{body: 
         "I'm an enginneer!" 
         });

3.2.1. 属性

静态属性:

Notification.Permission:chrome

'default' 等同于拒绝 'denied' 意味着用户不想要通知 'granted' 意味着用户赞成启用通知api

Test:在chrome的地址栏里面输入http://www.baidu.com, 打开console，并在里面输入Notification.Permission 默认返回的是'default'.浏览器

Notes:该属性是只读的不能手动修改安全

1

2

3

//在百度的首页打开console

Notification.Permission = 'granted'

Notification.Permission //'default'

实例属性：

如下属性都须要在Notification实例上才能访问，为只读属性，而且就是经过option来赋值异步

 
         Notification.dir     
         // 
        
         Notification.lang 
        
         Notification.Body    
         //通知的具体内容 
        
         Notification.tag     
         //实例化的notification的id 
        
         Notification.icon    
         //通知的缩略图

3.2.2 方法

静态方法

Notification.requestPermission() ``` //该方法将会询问用户是否容许显示通知 ``` 该方法不能由页面自主调用，必须由用户主动事件触发，仍是以百度的页面为例，百度的搜索框的id为'kw'：

 
         //不经过事件触发直接调用 
        
         Notification.requestPermission() 
        
         //页面无反应

```Javascript //经过用户主动事件触发来调用 document.getElementById('kw').onclick=function(){ Notification.requestPermission(); }; //页面信息栏会弹出询问用户是否容许显示桌面通知

```

Notes:当用户赞成以后，再次调用该方法则无效，即该方法仅对Notification.Permission不为'granted'的时候起做用

实例方法

 
         Notification.close()     
         //该方法容许经过代码控制关掉notification

Notes: Notification 没有实例方法show(),在Notification实例化的时候，浏览器就已经自动的去处理notification的显示过程了。

3.3 代码示例

如下代码将展现如何使用webkitNotification和Notification来显示桌面通知

3.3.1 webkitNotification

 
         document.getElementById( 
         'notifyButton' 
         ).onclick =  
         function 
         (){ 
        
         //判断浏览器是否支持notification 
        
         if 
         (window.webkitNotifications){ 
        
         //判断当前页面是否被容许发出通知 
        
         if 
         (webkitNotifications.checkPermission==0){ 
        
         var 
         icon_url =  
         'http://www.w3.org/' 
         ; 
        
         var 
         title =  
         'Hello HTML5' 
         ; 
        
         var 
         body =  
         'I will be always here waiting for you!' 
         ; 
        
         var 
         WebkitNotification = webkitNotifications.createNotification(icon_url, title, body); 
        
         WebkitNotification.show(); 
        
         } 
         else 
         { 
        
         document.getElementById( 
         'requestbutton' 
         ).onclick =  
         function 
         () { 
        
         webkitNotifications.requestPermission(); 
        
         }; 
        
         } 
        
         } 
         else 
         alert( 
         "您的浏览器不支持桌面通知特性，请下载谷歌浏览器试用该功能" 
         ); 
        
         };

3.3.2 Notification

 
         document.getElementById( 
         'notifyButton' 
         ).onclick =  
         function 
         () { 
        
         if 
         (window.Notification){ 
        
         if 
         (Notification.Permission=== 
         'granted' 
         ){ 
        
         var 
         notification =  
         new 
         Notification( 
         'Hello Notification' 
         ,{body: 
         "I hope that all the browser will support this\                   function!" 
         }); 
        
         } 
         else 
         { 
        
         document.getElementById( 
         'requestButton' 
         ).onclick =  
         function 
         (){ 
        
         Notification.requestPermission(); 
        
         }; 
        
         }; 
        
         } 
         else 
         alert( 
         '你的浏览器不支持此特性，请下载谷歌浏览器试用该功能' 
         ); 
        
         };

4. 参考文档

LINKS

W3官方文档

http://www.html5rocks.com/en/tutorials/notifications/quick

http://www.paulund.co.uk/html5-notifications

火狐开发者博客