一些情况下,我们希望网页可以直接向桌面推送消息。本文利用 HTML5 的 Web Notifications API 来展示具体的代码该如何编写,同时来看一看这个特性在各个浏览器上的兼容性如何。
一个简单的例子
javascript
if(window.Notification && Notification.permission !== "denied") { Notification.requestPermission(function(status) { // 请求权限 if(status === 'granted') { // 弹出一个通知 var n = new Notification('Title', { body : 'I am a Notification', icon : './images/test1.png' }); // 两秒后关闭通知 setTimeout(function() { n.close(); }, 2000); } }); }
首先,我们需要判断浏览器是否支持Notification。如果通过Notification.requestPermission
向用户请求权限,这是浏览器会弹出一个是否允许显示通知的提示:
如果用户选择了“允许”,那么返回的status
将会是granted
。这个时候我们就可以通过Notification()
来创建实例了:
new Notification('Title', {
body : 'I am a Notification',
icon : './images/test1.png'
})
第一个参数为标题,第二个参数为配置参数,里面包含以下可选参数:
效果图如下(Chrome):
接下来,两秒后,通知将会消失。
兼容性
Web Notifications API目前在以下浏览器得到了支持:
- Firefox 35+
- Chrome 31+
- Safari 7.1+
- Opera 27+
- Android Browser 4.4+ (需要加上
webkit
前缀)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。