Web Beacon 刷新/关闭页面以前发送请求

背景：

有一个任务很是耗时会消耗后台大量算力，因此在退出页面的时候，要求前端这边发送一个请求来杀死任务。

一开始觉得这个需求很是简单，就是在进入其余路由前，发送一下请求，杀死一下任务就行了。

然而现实狠狠的打了个人脸，由于退出页面的场景不止切换路由~

退出页面场景：

1. 还在本网站，跳到其余路由
2. 刷新页面/关闭页面也须要发送请求来杀死任务

还在本网站，跳到其余路由

这个比较简单，在Vue中能够经过路由离开的钩子beforeRouteLeave来实现：

beforeRouteLeave(to, from, next) {
    if (任务运行中) {
        // 发送请求
    }else{
        next(true) // 用户离开
    }
 }
复制代码

刷新页面/关闭页面的状况：

然而在刷新页面的时候，beforeRouteLeave并不会执行，接着想到了下面这两个API.

beforeunload和unload

beforeunload 当浏览器窗口关闭或者刷新时触发:

介绍：

使用这个API能够阻止页面直接关闭，用户经过点击肯定/取消按钮，来决定是否不关闭/刷新当前页面。

在 chrome 下长这个样子，大家确定都见过：

如何使用

这个 API 的使用很是简单，只要在页面加载的时候监听一下此事件，在须要出现弹窗的时候return 一个能够转化为 true 的值,就能够了。

// 页面卸载以前
let killTask = false; // 是否杀死任务
window.onbeforeunload = e => {
  if (任务运行 && 对应页面) {
    killTask = true;
    return '您可能有数据没有保存'; // 在部分浏览器能够修改弹窗标题
  } else {
    killTask = false;
  }
  // 没有return一个能够转化为true的值 就不会出现弹窗
};
复制代码

出现此弹窗的浏览器行为：

如下行为是基于 chorme：

1. 焦点：你没有点击取消/肯定以前，焦点会一直在此弹窗上

2. 你没法在出现弹窗的页面上执行任何操做

3. 在其余页面也只能执行简单的点击操做，弹窗仍是存在页面中间，没法使用键盘，

4. 键盘：键盘被绑定在弹窗上，只能经过按键Esc、Enter来执行取消/肯定操做

5. 弹窗不是页面的 dom，是浏览器的行为

6. 用户取消/肯定，没有回调 API，没法得知

弹窗标题：

chrome 中刷新页面的标题：从新加载此网站?

chrome 中关闭页面的标题：离开此网站?

如今大部分浏览器都不容许修改弹窗的标题，这个是为了安全考虑，来保证用户不受到错误信息的误导，

迷茫：

一开始我觉得既然能够拦截到用户的刷新/关闭页面的操做，出现了上面那个弹窗，这个需求就已经作完了的时候。

而后发现，浏览器居然没有提供用户点击肯定/取消刷新页面的回调。

到这里我陷入了迷茫，盯着beforeunload这个 API 思考了起了人生的意义(实际上是在发呆)，盯着盯着，从beforeunload的before我也就想到了unload这个 API。

瞬间又燃起了斗志，何不试试这个unload？

unload当页面正在被卸载的时候触发该事件

介绍

当页面正在被卸载的时候触发该事件，该事件不可取消，为不可逆操做。

使用

直接监听该事件就能够了。

window.onunload = e => {}
复制代码

结合需求:

killTask为beforeunload时定义的变量，每次进入回调，都会给killTask赋值，使用这个值就能够判断何时能够发送请求杀死任务。

window.onunload = e => {
  if (killTask && 对应页面) {
    // 发送请求
  }
};
复制代码

到这里你们确定觉得已经作出来了该需求，事实上，并无！

没法发送异步请求

我使用的是axios来发送请求，请求发出去了，可是被取消了，服务器那边根本没有收到请求，以下。

通过一顿分析:发现是axios请求是异步的问题，谷歌以后发现axios不支持同步的请求

最后使用原生的XMLHttpRequest对象，让请求同步

大功告成！ 实际上，上面才是我第一次要发的内容，而下面更好的解决方法！

缺陷与更好的建议：

当我把这篇文章发布在公众号上，被奇舞周刊转载了，上面一些大佬给我提了一些建议。

研究了一下，结果...好吧！我认可我是菜鸡。

hey~ 不过这正是我写博客的收获之一，分享经验，收获知识！

性能缺陷：

XHR同步请求会阻碍页面卸载，若是是刷新/跳转页面的话，页面从新展现速度会变慢，致使性能问题。

毕竟向网络发送请求并得到响应可能会超级慢，有多是用户网络环境比较差，又或者是服务器挂了，请求一直没返回回来...

基于性能问题，大佬们推荐使用Beacon代替XHR，而后通过一番搜索...

Beacon API

1. Beacon API用于将少许数据经过post请求发送到服务器。
2. Beacon是非阻塞请求，不须要响应

完美解决性能缺陷问题：

1. 浏览器将 Beacon 请求排队让它在空闲的时候执行并当即返回控制
2. 它在unload状态下也能够异步发送，不阻塞页面刷新/跳转等操做。

因此**Beacon能够完美解决上面提到的因XHR同步请求阻塞而引发的性能缺陷问题**。

使用：navigator.sendBeacon()

完整API：

let result = navigator.sendBeacon(url, data);
复制代码

Beacon是挂在navigator下面的，上面就是它的完整API。

result是一个布尔值，表明此次发送请求的结果:

• 若是浏览器接受而且把请求排队了则返回 tru
• 若是在这个过程当中出现了问题就返回 false

navigator.sendBeacon接受两个参数：

1. url: 请求的 URL。请求是 POST 请求。
2. data: 要发送的数据。 数据类型能够是：ArrayBufferView, Blob, FormData，Sting。

来看一个用FormData来传递数据的栗子，你就懂了：

// 建立一个新的 FormData 并添加一个键值对
let data = new FormData();
data.append('hello', 'world');
let result = navigator.sendBeacon('./src', data);
if (result) { 
  console.log('请求成功排队 等待执行');
} else {
  console.log('失败');
}
复制代码

浏览器支持：

浏览器支持：Edge：14+，Firefox：31+，Chrome：39+，Opera：26+，IE：不支持。

虽然如今浏览器对sendBeacon的支持很好，咱们对其作一下兼容性处理也是有必要的：

if (navigator.sendBeacon) {
  // Beacon 代码
} else {
 // 回退到 XHR同步请求或者不作处理
}
复制代码

web wroker中使用Beacon

由于Beacon是挂在navigator下面，而web worker也有navigator，去找了一下，真的给我找到了。

这儿有一个MDN提供的栗子，能够点进去看一下。

PS：对web worker不熟悉的同窗能够看我这篇文章

Beacon其余相关

• 客户端优化：能够将 Beacon 请求合并到其余请求上，一同处理, 尤为在移动环境下。
• Beacon更多的状况是用于作前端埋点，监控用户活动，它的初衷也基于此。

小结

本文总共讲了三个API，beforeunload、unload和Beacon，Beacon这个API估计知道的人比较少，之后遇到前端埋点和页面卸载前发送请求的需求，记得使用这三个API。

以上2019.02.19

博客、前端积累文档、公众号、GitHub、wx:OBkoro一、邮箱：obkoro1@foxmail.com

参考资料：

MDN

页面跳转时，统计数据丢失问题探讨

使用 Web Beacon API 记录活动