HTML5技术

HTML5 桌面通知:Notification API - _林鑫

字号+ 作者:H5之家 来源:H5之家 2017-10-23 09:02 我要评论( )

前言 Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息。该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来。 用户权限 想要向用户显示通知消息,需要获取用户权限,而相同的

前言

Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息。该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来。

用户权限

想要向用户显示通知消息,需要获取用户权限,而相同的域名只需要获取一次权限。只有用户允许的权限下,Notification 才能起到作用,避免某些网站的广告滥用 Notification 或其它给用户造成影响。那么如何知道用户到底是允不允许的?

Notification.permission 该属性用于表明当前通知显示的授权状态,可能的值包括:

)().log('用户还没选择,去向用户申请权限吧'); }

请求权限

当用户还没选择的时候,我们需要向用户去请求权限。Notification 对象提供了 requestPermission() 方法请求用户当前来源的权限以显示通知。

以前基于回调的语法已经弃用(当然在现在的浏览器中还是能用的),最新的规范已将此方法更新为基于 promise 的语法:

)(permission .);

推送通知

获取用户授权之后,就可以推送通知了。

(title, options)

参数如下:

  • title:通知的标题
  • options:通知的设置选项(可选)。
  • 还有一些其他的参数,因为用不了或者没什么用这里就没必要说了。

    ()

    通知消息的效果图如下:

    关闭通知

    从上面的参数可以看出,并没有一个参数用来配置显示时长的。我想要它 3s 后自动关闭的话,这时可以调用 close() 方法来关闭通知。

    () );

    事件

    Notification 接口的 onclick属性指定一个事件侦听器来接收 click 事件。当点击通知窗口时会触发相应事件,比如打开一个网址,引导用户回到自己的网站去。

    () ()).

    应用场景

    前面说那么多,其实就是为了用。那么到底哪些地方可以用到呢?

    现在网站的消息提醒,大多数都是在消息中心显示个消息数量,然后发邮件告诉用户,这流程完全没有错。不过像我这种用户,觉得别人点个赞,收藏一下都要发个邮件提醒我,老是要去删邮件(强迫症),我是觉得挺烦的甚至关闭了邮件提醒。

    当然这里并不是说要用 Notification,毕竟它和邮件的功能完全不一样。

    我觉得比较适合的是新闻网站。用户浏览新闻时,可以推送给用户实时新闻。以腾讯体育为例,它就使用了 Notification API。在页面中引入了一个 notification2017_v0118.js,有兴趣可以看看别人是怎么成熟的使用的。

    一进入页面,就获取授权,同时自己页面有个浮动框提示你允许授权。如果允许之后,就开始给你推送通知了。不过它在关闭标签卡的时候,通知也会被关闭,那是因为监听了页面 beforeunload 事件。

    .(addOnBeforeUnload).); }

    兼容

    说到兼容,自然是倒下一大片,而且各浏览器的表现也会有点差异。移动端的几乎全倒,PC端的还好大多都能支持,除了IE。所以使用前,需要先检查一下浏览器是否支持 Notification。

    更多文章:https://github.com/lin-xin/blog

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 关于HTML5手机端页面缩放的问题 - 神仙哥哥灬

      关于HTML5手机端页面缩放的问题 - 神仙哥哥灬

      2017-10-20 14:47

    • [js高手之路]html5 canvas动画教程 - 下雪效果 - ghostwu

      [js高手之路]html5 canvas动画教程 - 下雪效果 - ghostwu

      2017-10-19 10:02

    • [js高手之路]html5 canvas教程 - 1px问题以及绘制坐标系网格 - ghostwu

      [js高手之路]html5 canvas教程 - 1px问题以及绘制坐标系网格 - ghost

      2017-10-18 18:31

    • [js高手之路]html5 canvas动画教程 - 自己动手做一个类似windows的画图软件 - ghostwu

      [js高手之路]html5 canvas动画教程 - 自己动手做一个类似windows的画

      2017-10-18 10:00

    网友点评