html5-Notification未来的属性

浏览数：26 / 时间：2015年06月09日

用作桌面提醒特别方便，特别是手机端。先睹为快吧^_^

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 
 9 <body>
10     <button>Notify me!</button>
11     <script>
12     window.addEventListener(‘load‘, function() {
13         // At first, let‘s check if we have permission for notification
14         // If not, let‘s ask for it
15         if (window.Notification && Notification.permission !== "granted") {
16             Notification.requestPermission(function(status) {
17                 if (Notification.permission !== status) {
18                     Notification.permission = status;
19                 }
20             });
21         }
22 
23         var button = document.getElementsByTagName(‘button‘)[0];
24 
25         button.addEventListener(‘click‘, function() {
26             // If the user agreed to get notified
27             // Let‘s try to send ten notifications
28             if (window.Notification && Notification.permission === "granted") {
29                 for (var i = 0; i < 10; i++) {
30                     // Thanks to the tag, we should only see the "Hi! 9" notification
31                     var n = new Notification("Hi! " + i, {
32                         tag: ‘soManyNotification‘
33                     });
34                 }
35             }
36 
37             // If the user hasn‘t told if he wants to be notified or not
38             // Note: because of Chrome, we are not sure the permission property
39             // is set, therefore it‘s unsafe to check for the "default" value.
40             else if (window.Notification && Notification.permission !== "denied") {
41                 Notification.requestPermission(function(status) {
42                     if (Notification.permission !== status) {
43                         Notification.permission = status;
44                     }
45 
46                     // If the user said okay
47                     if (status === "granted") {
48                         for (var i = 0; i < 10; i++) {
49                             // Thanks to the tag, we should only see the "Hi! 9" notification
50                             var n = new Notification("Hi! " + i, {
51                                 tag: ‘soManyNotification‘
52                             });
53                         }
54                     }
55 
56                     // Otherwise, we can fallback to a regular modal alert
57                     else {
58                         alert("Hi!");
59                     }
60                 });
61             }
62 
63             // If the user refuses to get notified
64             else {
65                 // We can fallback to a regular modal alert
66                 alert("Hi!");
67             }
68         });
69     });
70     </script>
71 </body>
72 
73 </html>