node.js - 检测 Google Chrome 页面预取

Question

我正在构建一个简单的工具来跟踪和增加网站的访问次数。这很简单:

When the server receives a GET request, it will increase the counter in database for that website by 1.

但是，我在使用 Google Chrome 浏览器的预渲染引擎时遇到了一些问题(“预测网络操作以提高页面加载性能”)。

该网站是 www.domain.com，只要您在浏览器的地址栏中键入域名 www.domain.com(无需按 Enter)，Chrome 就会发送一个 GET 请求来预取该页面，从而导致服务器记录访问并将数据库中的计数器增加 1。之后，如果用户按 Enter 并实际加载网页，服务器将看到另一个 GET 请求进入，从而再次增加计数器。这导致在数据库中记录了 2 次重复访问。据我了解，谷歌浏览器只下载页面但不执行它，但一旦我的服务器收到 GET 请求，计数器就会增加。

问题:有什么办法可以解决这个问题吗？最好，我想检测访问该网站的是预取还是实际用户。

Answer 1

这似乎是服务器端检测不到的。

Chromium 项目为此打开了一个问题。它被标记为“不会修复”(Prerendering does not have any distinguishing HTTP headers)。预取请求不会显示在开发工具的“网络”选项卡中，因此您无法通过查看 header 轻松确认这一点。我使用 Wireshark 检查了它们，不幸的是，将预渲染请求与“正常”请求区分开来没有区别。

解决方法:

您可以使用 Page Visibility API 在客户端检查预取页面.它比服务器端跟踪要多一些工作，但您可以在页面中插入一个脚本标记来检查它是否是预呈现请求。如果是这种情况，发送一个 AJAX 请求以某种方式识别它是哪个页面，并使用它来增加数据库中的计数器。

if (document.visibilityState !== 'prerender')
{
    //ajax call registering page hit
}

请注意 AJAX 请求不会从缓存中返回结果，从而阻止它到达服务器。