1 <html> 2 <head> 3 <script type="text/javascript"> 4 var n; 5 function setNotification() 6 { 7 if (window.webkitNotifications.checkPermission() != 0) { 8 alert("you don't have permission to post notifications, please allow notifications by clicking that link"); 9 document.getElementById('allowNotificationLink').style.backgroundColor = 'Red'; 10 return 0; 11 } 12 n = window.webkitNotifications.createNotification(window.location.href + '/favicon.ico', 'Notify me', 'This is the notification body'); 13 log = document.getElementById("place"); 14 n.onshow = function() { log.innerText = "notification showing"; } 15 n.onclick = function() { log.innerText = "notification clicked"; } 16 n.onerror = function() { log.innerText = "notification error"; } 17 n.onclose = function() { log.innerText = "notification closed"; } 18 n.show(); 19 log.innerText = "Did you notice the notification ? There are 3 ways the notification will go away:\n 1. It automically goes away in 30 seconds;\n 2. you can click the close button on the notification to close it;\n 3. Click above link 'Click to cancel the notification.\n\n Please verify all work; Whenever the icon is clicked, cancelled, closed, etc. there will be corresponding log is this area, please notice if they show up."; 20 21 setTimeout(timeout, 30000); 22 function timeout() { 23 n.cancel(); 24 } 25 } 26 27 function setAllowNotification() 28 { 29 window.webkitNotifications.requestPermission(permissionGranted); 30 } 31 32 function permissionGranted() 33 { 34 if (window.webkitNotifications.checkPermission() == 0) 35 alert("you now have permission to post Notifications"); 36 else 37 alert("you don't have permission to post Notifications"); 38 } 39 </script> 40 </head> 41 42 <body style="font-size:x-large"> 43 <a style="margin-left: 20px;" id="allowNotificationLink" onclick="setAllowNotification(); return false;" href="#">Click to set allow notifications first</a> <br> 44 45 <a style="margin-left: 20px;" onclick="setNotification(); return false;" href="#">Click to set notification</a> <br> 46 <a style="margin-left: 20px;" onclick="n.cancel(); return false;" href="#">Click to cancel the notification</a> <br> 47 <br><br> 48 <div id="place"> 49 </div> 50 51 </body> 52 </html> 53 54
