UDN-企业互联网技术人气社区

板块导航

浏览  : 2923
回复  : 2

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

[复制链接]
葡萄柚的头像 楼主
发表于 2017-2-5 10:20:03 | 显示全部楼层 |阅读模式
  HTML5为开发者提供了大量的新特性,例如地理定位、本地存储、应用缓存等一系列的功能。今天主要介绍一下Web Notification。

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

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

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

  权限:

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

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

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

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

  请求用户权限:

  通过Notification的requestPermission及回调函数来实现:
  1. Notification.requestPermission(function(permission){
  2. if(permission === 'granted') {
  3.                 // 允许
  4. }else if(permission === 'denied'){
  5.                 // 禁止
  6. }
  7. });
复制代码

  属性和方法:
  1. [Constructor(DOMStringtitle, optionalNotificationOptionsoptions)]
  2. interfaceNotification : EventTarget {
  3.   static readonlyattributeNotificationPermissionpermission;
  4.   static void requestPermission(optionalNotificationPermissionCallbackcallback);

  5.   attributeEventHandleronclick;
  6.   attributeEventHandleronshow;
  7.   attributeEventHandleronerror;
  8.   attributeEventHandleronclose;

  9.   readonlyattributeDOMStringtitle;
  10.   readonlyattributeNotificationDirectiondir;
  11.   readonlyattributeDOMStringlang;
  12.   readonlyattributeDOMStringbody;
  13.   readonlyattributeDOMStringtag;
  14.   readonlyattributeDOMStringicon;

  15.   void close();
  16. };

  17. dictionary NotificationOptions {
  18.   NotificationDirectiondir = "auto";
  19.   DOMStringlang = "";
  20.   DOMStringbody;
  21.   DOMStringtag;
  22.   DOMStringicon;
  23. };

  24. enum NotificationPermission {
  25.   "default",
  26.   "denied",
  27.   "granted"
  28. };

  29. callbackNotificationPermissionCallback = void (NotificationPermissionpermission);

  30. enum NotificationDirection {
  31.   "auto",
  32.   "ltr",
  33.   "rtl"
  34. };
复制代码

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

  创建通知:
  1. var notification = new Notification("测试通知",{
  2. icon : "http://img1.gtimg.com/2016/pics/hv1/53/152/2109/137176538.jpg",
  3. tag : 1,
  4. requireInteraction : true
  5. });
复制代码

  说明:

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

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

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

  兼容性:
4.png

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

  实践:

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

  请求通知:
3.png

  首条欢迎信息:
2.png

  热门新闻通知:
1.png

  FAQ:

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

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

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

  写在最后:

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

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

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

相关帖子

发表于 2017-2-5 10:20:35 | 显示全部楼层
其实HTML5技术优势主要体现在能帮助企业降低开发成本、缩短开发周期、可以跨设备等
使用道具 举报

回复

发表于 2017-2-5 10:20:36 | 显示全部楼层
不错的帖子,支持下
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部