浏览器network中的ping请求

发表于 更新于 阅读次数： 本文字数： 928 阅读时长 ≈ 2 分钟

Chrome浏览器的network中经常会看到ping类型的请求，好奇是怎么发起又有什么作用呢。这里分析总结下。

https://static.1991421.cn/2024/2024-05-31-190626.jpeg

调查后发现ping类型请求是通过navigator.sendBeacon发起，该方法可携带数据。实际上发送的还是post请求。即服务端还是按照post请求去处理和返回。

该请求是由浏览器异步发起的，发起方是navigator并非是所在网页内的单线程JS。由于这个特性，网页的开关不会影响这个请求的执行。

举个例子

比如unload页面时，可以通过sendBeacon发送请求告诉服务端用户关闭了网页，如果是传统的使用XHR或者fetch，其实可能请求还没发出去网页就已经关闭，而通过sendBeacon就没有这种风险。

极端情况下除外，比如浏览器异常关闭或者电脑直接关机了，这种肯定是没办法了。

不同浏览器下的不同表现

sendBeacon请求在不同浏览器下显示上会有所不同。

  1. Chrome显示为bing类型
  2. Safari显示为beacon类型
  3. Firefox显示为beacon类型

不过糟糕的是以Chrome为例，在network中无法直接快速筛选出ping类型请求，只能选择other或者通过请求URL去筛选。

发起ping类型请求

具体如何发起该请求呢，这里举个例子。

1
2
3
navigator.sendBeacon('/beacon', new Blob([JSON.stringify({
 type: 'hello'
})], {type: 'application/json'}));

使用场景

该方法的特性决定了很适合做数据埋点，比如页面关闭时发送消息。

在实际的项目中我也发现数据上报类库会采用sendBeacon来实现。

写在最后

我所了解的就这些了。

相关网页