销毁页面时, 发送统计数据

1. 销毁页面事件

• unload和beforeunload;

// 卸载前, 提示
// 再 chrome(电脑版)中有弹窗提示; 移动版 微信/safari/QQ 浏览器中无效;
window.addEventListener('beforeunload', function(event){
    event.preventDefault();
    event.returnValue = ''; // chrome 浏览器必须
    alert('要卸载吗');  // 全部浏览器无效
});

2. api

• navigator.sendBeacon(url, 数据);
• 注意事项:
  • 默认是发post请求，后端需要能够post接收数据
  • Beacon API不提供相应的回调，因此后端返回最好省略response body，（例如，204 No Content）
  • navigator.sendBeacon()之后的代码可以执行

// "unload"前, 上报统计
// 经测试, chrome浏览器中需在beforeunload事件中发送, 否则请求会penging状态挂起;
window.addEventListener('beforeunload', function(event){
    let sendData = JSON.stringify({
        page: window._pageName||location.href,
        timeStamp: Date.now()
    })
    navigator.sendBeacon('http://localhost:9999/logs', sendData);
});