html5-Notification未来的属性
用作桌面提醒特别方便，特别是手机端。先睹为快吧^_^
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>
