1<html> 2<head> 3<script type="text/javascript"> 4var n; 5function 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 27function setAllowNotification() 28{ 29 window.webkitNotifications.requestPermission(permissionGranted); 30} 31 32function 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