原文：http://blog.csdn.net/liuhe688/article/details/41971215
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>The Essential Guide to HTML5</title> </head> <body> <a href="javascript:popNotifications();">点击我</a> </body> <script type="text/javascript"> window.onload=function(){ popNotifications() } function popNotifications(){ var n = new Notification("sir, you got a message", { icon: 'img/icon.png', body: 'you will have a meeting 5 minutes later.' }); //onshow函数在消息框显示时会被调用 //可以做一些数据记录及定时操作等 n.onshow = function() { console.log('notification shows up'); //5秒后关闭消息框 setTimeout(function() { n.close(); }, 5000); }; //消息框被点击时被调用 //可以打开相关的视图，同时关闭该消息框等操作 n.onclick = function() { alert('open the associated view'); //opening the view... n.close(); }; //当有错误发生时会onerror函数会被调用 //如果没有granted授权，创建Notification对象实例时，也会执行onerror函数 n.onerror = function() { console.log('notification encounters an error'); //do something useful }; //一个消息框关闭时onclose函数会被调用 n.onclose = function() { console.log('notification is closed'); //do something useful }; } </script> </html>
最后，需要注意的是，消息通知只有通过Web服务访问该页面时才会生效，如果直接双击打开本地文件，是没有任何效果的。所以在平时做练习的时候也需要把文件目录放进Web容器内，切记。
消息通知是个不错的特性，可是也不排除有些站点恶意的使用这个功能，一旦用户授权之后，不时的推送一些不太友好的消息，打扰用户的工作，这个时候我们可以移除该站点的权限，禁用其消息通知功能。我们可以依次点击设置打开设置的选项卡，然后点击底部的显示高级设置，在隐私一项中点击内容设置，最后会弹出一个内容面板，向下滑动找到消息通知一项，如何更改，想必就不用多说了。
讲到这里，关于消息通知的基本应用也就涵盖个差不多了，希望朋友们能仔细体会，最后可以把这个新特性应用在实际项目中，必定会增色不少的。