Articles tagged 'Front-end'

HTML5 Notification 介绍

Html5 Notification

浏览器的提醒功能越来越多的被使用,只要用户使用浏览器访问网站就会自动收到基于 HTML 5 的 Notification.

风车中很早就使用了这个技术来作为我们的在线消息提醒,在不断的完善和改进后,希望可以把 HTML 5 Notification 做一个总结介绍。

浏览器支持

目前支持 HTML 5 Notification 的常用浏览器有 Safari 6+,FireFox 23+,Chrome,IE 9.0+ 。不同的浏览器使用的方法不同。

另外要说的一点,关于 IE 对 HTML 5 Notification 的支持不完美,个人不推荐使用。真爱生命,远离 IE

HTML 5 Notification 使用步骤

  • 判定用户浏览器是否支持
  • 获取权限 (用户可以在浏览器中设置是否启用 HTML 5 Notification)
  • 设置权限 (用户如果第一次使用该网站,需要让用户设置 HTML 5 Notification 为开启,当然用户也可以选择拒绝)
  • 创建 Notification

实现(CoffeeScript)

代码源自于风车

首先判定用户浏览器是否支持 HTML 5 Notification
hasSupport: ->
  window.Notification? or window.webkitNotifications? or (window.external && window.external.msIsSiteMode?() isnt undefined)

......

Read more →