HTML5新特性之WebNotifications

本文介绍了HTML5的Web Notifications特性,允许开发者创建桌面通知,即使用户离开页面也能接收消息。通过Notification类创建消息框,请求用户授权,并处理不同状态下的通知显示。示例代码展示了如何组织事件逻辑,提醒读者此功能需通过Web服务访问页面才能生效,并提供了权限管理的说明。
摘要由CSDN通过智能技术生成

由于平时忙于工作,已经有很长时间没有更新博客了,偶尔会进来看一眼,发现有很多朋友在下面留言,我很庆幸当时能写下这些有价值的文章,直到现在还能够帮助这么多朋友解决Android方面的一些问题。

最近研究了一下HTML5方面的一些新技术,很是想记录下来成文,一方面可以加深自己对技术的理解,另外希望能帮助初学者理解和学习这些技术。
今天我们先来讲解一下桌面通知,即Web Notifications技术。

Web Notifications是HTML5中一个令人欣喜的新特性,它支持开发者配置和显示桌面通知,为用户提供更好的体验,最令人称赞的是,即使用户忙于其他工作时也可以收到来自页面的消息通知,例如一个新邮件的提醒,或者一个在线聊天室收到的消息提醒等等。

接下来,我们就试着一步一步创建我们自己的消息通知。

要创建消息通知,首先我们要创建一个消息框,这非常很简单,直接使用window对象下面的Notification类即可,代码如下:

var n = new Notification("sir, you got a message", {
	icon: 'img/icon.png',
	body: 'you will have a meeting 5 minutes later.'
});

在Notification这个类的构造函数中,有两个重要的参数,第一个是消息的标题,第二个是消息体对象,其中包括消息框的图标(icon)和消息内容(body)。

在执行完以上代码后,我们就成功地创建了一个消息框实例,在Chrome下面它最终会显示成这样:


到这里我们已经成功了一半,但能不能正确地显示出这个消息框,最终还取决于用户的授权。鉴于浏览器的安全机制,只有用户同意网页弹出消息通知框,消息通知才能够真正的显示出来。所以现在我们要做的就是申请用户授权。

Notification类提供了一个requestPermission方法,用来请求用户授权,代码如下:

Notification.requestPermission(function(status) {
	//status是授权状态,如果用户允许显示桌面通知,则status为'granted'
	console.log('status: ' + status);

	//permission只读属性
	var permission = Notification.permission;
	//default 用户没有接收或拒绝授权请求 不能显示通知
	//granted 用户接受授权请求 允许显示通知
	//denied  用户拒绝授权请求 不允许显示通知

	co
  • 9
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 10
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值