Zhuoyu Yang 努力学习 Javascript 中...

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)

window.Notification? 用于判定 FireFox 23+ 以及 Chrome

window.webkitNotifications? 用于判定 Safari 6+

window.external && window.external.msIsSiteMode?() isnt undefined 用于判定 IE 9+

获取用户浏览器设置权限

此时,我们需要判定用户浏览器权限,可能用户没有开启 Notification 或者用户禁用了 Notification。

hasPermission: ->
  if window.webkitNotifications?
    if window.webkitNotifications.checkPermission() is 0
      return true
    else
      return false
  else if window.Notification?.permission
    if window.Notification.permission is "granted"
      return true
    else
      return false
  else if window.external.msIsSiteMode()
    return true
  else
    return false
  • Safari:

    window.webkitNotifications.checkPermission()
    

返回值: 0 允许,1 还未设置,2 禁止。

  • Chrome && FireFox :

    window.Notification.permission
    

返回值: default 还未设置,granted 允许,denied 禁止

  • IE:

    window.external.msIsSiteMode()
    

是否 Pin the website (通俗的说就是是否把网站设置为快捷图标。:) )

设置权限
  • Safari:

    Notification.requestPermission()
    

调用此方法将会弹出

set safari notification

  • Chrome & FireFox:

    webkitNotifications.requestPermission()
    

调用此方法将会弹出

set chrome notification

创建 Notification
notify: (avatar, title, content, url = null) ->
  if window.Notification
    onclick = ->
      window.parent.focus()
      window.parent.notifier.visitUrl(url)

    popup = new Notification(title, { 'body': content, 'onclick': onclick, 'icon': avatar })
  else if window.webkitNotifications
    popup = window.webkitNotifications.createNotification(avatar, title, content)
    popup.show()
  else if window.external and window.external.msIsSiteMode()
    window.external.msSiteModeClearIconOverlay()
    window.external.msSiteModeSetIconOverlay "/chat.ico", title
    window.external.msSiteModeActivate()

    if popup
      popup.onclick = onclick if url
  • Safari:

    new Notification(title, { 'body': content, 'onclick': onclick })
    

在 Safari 中不支持图片,只可以传入“标题”, “内容”,“绑定事件”,在这里我们设置为当点击一个 Notification 的时候,浏览器会跳转到相应的地址。

safari notification

  • Chrom & FireFox 创建:

    window.webkitNotifications.createNotification(avatar, title, content)
    

在 Chrome 和 FireFox 中,除了可以传入“标题”和“内容”外,我们还可以传入图片!

webkit notification

  • IE:

    window.external.msSiteModeClearIconOverlay()
    window.external.msSiteModeSetIconOverlay "/chat.ico", title
    window.external.msSiteModeActivate()
    

这个就比较。。。。不说了,只会在左下脚图标中出现一个小脚标,然后有闪动效果。

windows notification

更多关于 IE 的资料 http://msdn.microsoft.com/en-us/library/ie/gg618532(v=vs.85).aspx.aspx)

comments powered by Disqus