如何在页面发送通知消息

如果你的网站需要在用户登陆或者在某些特定时刻向用户发送通知。

这个webapi可能会起到效果

Notification

Web Notifications API 使页面可以发出通知,通知将被显示在页面之外的系统层面上(通常使用操作系统的标准通知机制,但是在不同的平台和浏览器上的表现会有差异)。这个功能使 web 应用可以向用户发送信息,即使应用处于空闲状态。最明显的用例之一是一个网页版电子邮件应用程序,每当用户收到了一封新的电子邮件都需要通知用户,即使用户正在使用另一个应用程序。

诸如在线团队协作平台(如tower)或者聊天系统,都需要主动向用户发送通知,让用户可以及时收到最新动态

tower就是通过这个接口像用户发送通知消息的。

权限

使用Notification接口时需要像用户发送授权请求(如获取用户地址位置信息等需要用户隐私的接口都需要用户授权)

Notification.requestPermission( function(status) {

});

仅当status为granted时表示用户接受通知

status有三种状态:default,granted,denied

*default一般是用户未处理授权请求

*granted表示用户接受通知的授权

*denied表示用户拒绝接受通知

Notification对象

  var notification = new Notification(title,{
    body:string,
    icon:imageUrl
  });

Notification对象有三个参数,分别是通知标题,通知内容,还有图标

显示效果如下:

image

回调函数

notification有4个回调函数

*onshow:当通知被显示给用户时触发。

*onclick:当用户点击通知时触发。

*onclose:当通知被关闭时触发。

*onerror:当通知发生错误的时候触发。这通常是因为通知由于某些原因而无法显示。

Notification.requestPermission( function(status) {

    var notification = new Notification("标题");

    notification.onshow = function(){};

    notification.onclick = function(){};

    notification.onclose = function(){};

    notification.onerror = function(){};

});

(接口文档);