H5 _浏览器通知功能使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Notification</title>
 6 </head>
 7 <body>
 8     <div class="content">
 9         <button id="creatNotification">Creat</button>
10         <button id="closeNotification">Close</button>
11     </div>
12     <script>
13         var page = {
14             data : {
15                 Notification : '',
16                 count        : 0
17             },
18             init : function(){
19                 this.bindEvent();
20             },
21             bindEvent : function(){
22                 var _this = this,
23                     creatN = document.getElementById('creatNotification'),
24                     closeN = document.getElementById('closeNotification');
25                 creatN.onclick = function(){
26                     _this.creatNotification();
27                 }
28                 closeN.onclick = function(){
29                     _this.closeNotification();
30                 }
31             },
32             /*
33                 Notification对象permission属性：
34                 default ：用户尚未配浏览器请求显示通知权限。
35                 grant   ：有显示通知权限。
36                 denied  ：拒绝显示通知权限。
37             */
38             creatNotification : function(){
39                 var _this = this;
40                 if(window.Notification.permission === 'granted'){
41                     //创建通知
42                     _this.data.Notification = new Notification('简单文本通知',{
43                         dir  : 'ltr',//通知的文字方向
44                         // icon : 'icon',
45                         tag  : 'MyID',//值为字符串，指定通知的唯一标识
46                         body : '这是第'+ (++_this.data.count) + '通知内容'
47                     });
48                     //通知被显示
49                     _this.data.Notification.onshow = function(){
50                         alert('通知被显示');
51                     }
52                     //通知被关闭
53                     _this.data.Notification.onclose = function(){
54                         // _this.data.count--;
55                         alert('通知被关闭');
56                     }
57                     //通知被点击
58                     _this.data.Notification.onclick = function(){
59                         alert('通知被点击');
60                     }
61                     // onerror 事件
62                     _this.data.Notification.onerror = function(e){
63                         //e代表被捕捉到的错误对象
64                         alert('error')
65                     }
66                 }
67                 else if (window.Notification.permission === 'default'){
68                     window.Notification.requestPermission();
69                 }
70             },
71             closeNotification : function(){
72                 //close()方法关闭通知
73                 this.data.Notification.close();
74             }
75         }
76         window.onload = page.init();
77     </script>
78 </body>
79 </html>