HTML5桌面通知Notification在腾讯网的实践

HTML5为开发者提供了大量的新特性,例如地理定位、本地存储、应用缓存等一系列的功能。今天主要介绍一下Web Notification。

早在几年前,开发者就可以使用-webkitNotifications.createHTMLNotification方法来创建chrome桌面通知,直到chrome升级到22起不再支持 window.webkitNotifications.createHTMLNotification 方法,目前已被W3C的Notification取代。

相比传统的页面内嵌入固定定位的div来展示通知的方式,Notification的一大特色在于:即便用户在浏览其他页卡或将浏览器最小化,仍然可以及时收到桌面通知。因此当用户忙于其他工作时也可以收到最新的新闻、新邮件的提醒等等。

也正是由于Notification有如此高的优先级,所以浏览器出于安全限制,对通知的弹出增加了用户的授权。

权限:
通知权限是基于域名的,同一域名下只需获取一次权限。通知必须获得用户授权才能够显示,避免广告类通知肆意弹出干扰用户,可谓十分“克制”。

window.Notification.permission是枚举类型,分为:

default 默认值,提示用户是否授权显示通知
denied 用户禁止通知
granted 用户允许通知

该属性为只读,不能手动更改,必须由页面请求用户权限。

请求用户权限:

通过Notification的requestPermission及回调函数来实现:

属性和方法:

消息的主体包含:标题、内容、图片等等,另外Notification还提供了onclick、onclose等一系列方法,实现通知的点击跳转、关闭等功能。

创建通知:

说明:

这里的tag用来实现“单例模式”,提供一个标签,便于通知的检索、关闭和替换。当同一域名下有多条通知时,具有同样tag的两条将会用后一条替换前一条,而不是罗列显示。

requireInteraction:true,保证消息不会自动消失,直到用户手动点击或关闭。

此处没有用到的body、dir、lang为非必选属性,可以根据产品需要选择性填写。

兼容性:

HTML5桌面通知Notification在腾讯网的实践

可以看到,在高级浏览器chrome、Firefox、Safari、Opera以及Edge14中都对Notification提供了支持。另外一些国产浏览器在chrome内核的模式下也能够识别Notification,例如QQ、搜狗等浏览器,尽管这些浏览器对Notification的表现各不一致。

 

实践:

目前已在腾讯网体育频道和奥运频道全量部署上线。虽然目前已有多个浏览器实现了Notification API,但为了保证体验的一致性,目前只针对chrome浏览器和QQ浏览器用户发送通知。

请求通知:

HTML5桌面通知Notification在腾讯网的实践

首条欢迎信息:

HTML5桌面通知Notification在腾讯网的实践

热门新闻通知:

HTML5桌面通知Notification在腾讯网的实践

HTML5桌面通知Notification在腾讯网的实践

FAQ:

最近被一些小伙伴问到国内是否可用,消息是否会被墙掉?

其实这个功能使用的只是HTML5的Notification API,并未用到Google的GCM服务。它像HTML5提供的其他API一样,不涉及到翻墙的问题。大家可以放心使用~

对于HTML5 Notification的展现形态还有很多值得探索的地方,随着规范的不断发展,未来我们有更多可能多样化的使用这些API。也欢迎大家一起探讨、分享。

HTML5桌面通知Notification在腾讯网的实践

写在最后:

HTML5和CSS3为开发者提供了多种令人激动的新特性,给前端开发者带来了更多的选择和便利。相比在移动端的应用,这些新特性在PC端的使用还十分保守。如果我们一味的停留在对IE6、7、8的兼容中而畏手畏脚不敢或不能尝试新特性,不论对公司、团队还是个人都是莫大的损失。

作为一个前端汪,当听闻淘宝网首页不再支持IE7及以下浏览器,而是直接强制用户更换浏览器的时候,心里特别激动。当一个企业发展到一定规模的时候,它所肩负的社会责任就会越多。不断推动规范的发展、标准化和落地实施是我们义不容辞的责任。 =。=

又听闻有相当比例的IE6、7、8浏览器的使用者,其实都是前端汪在~~调~~试~~

抛弃吧,抛弃他们吧,那些还在用IE6、7、8的人啊。