2018-03-15

• webNotification
• webWorker
• webServerSentEvent

01 webnotification

使用场景

私信、在线提问、或者一些在线即时通讯工具,需要知道对方有了新的反馈

获得用户许可

Notification.requestPermission()

查看用户当前许可状态

Notification.permission

• 默认:default
• 授权:granted
• 拒绝:denied

调用方式两种回调和链式调用

• Notification.requestPermission().then(function(permission) { ... });
• Notification.requestPermission(callback);

demo

function getPermission(fn){
  Notification.requestPermission().then(function(result) {
    //result可能是是granted, denied, 或default.
  });
}

function notification(){
  if( Notification.permission === 'granted' ){
    var notification = new Notification("title", {
        body: 'msg body',
        icon: 'mm1.jpg'
    });

    notification.onclick = function(){
        // ... 这里执行跳转
        notification.close();
    }

  }
}

02 webWorker

使用场景

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

webWorker 适合于消耗CPU的任务

检测 webWorker 支持

if(typeof webWorker !== 'undefined'){

}

创建 webWorker 文件

var i=0;

function timedCount() {
  i=i+1;
  postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();

重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息

创建 webWorker 对象

w=new Worker("demo_workers.js");

w.onmessage=function(event){
  //event.data中有数据
  document.getElementById("result").innerHTML=event.data;
};

终止 webWorker

w.terminate();

03 webServerSentEvent

使用场景

EventSource 对象用于接收服务器发送事件通知，eg微博、twitter新消息

监听源

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

客户端事件

• onopen 当通往服务器的连接被打开
• onmessage 当接收到消息
• onerror 当错误发生

demo

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "
";
};