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>
