怎么检查站点更新？

这是一个很常见的问题，对于一个 web 应用，当在后台进行了应用升级，怎么能让用户立即得到更新呢？

理一下思路，要让用户所在的 web 端能知道更新，首先需要检查更新，所以这里可以简单使用轮询来实现。

接下来就是如何去判断是否有更新了，有更新则给出更新提示。

实现上述两个步骤，基本上就可以实现一个简单的更新检测。

定时检测

首先，为了让用户在 web 端能及时检查到服务端发生了更新，我们可以使用 setInterval 来定时检测，比如每隔 5 分钟检测一次，如：

setInterval(() => {
  // 检测后台是否有新版本
}, 5 * 60 * 1000);

在检测函数中，我们可以发起请求并判断是否有新版本可用。

怎么判断是否有新版本？

这个问题其实也很简单，不知道你还记不记得浏览器协商缓存？

要判断是否有新版本可用，我们可以利用浏览器缓存机制中的协商缓存来与服务端进行交互。浏览器在请求资源时，服务端会返回一个响应头，其中包含一个名为 ETag 的字段。

为了降低请求资源的消耗，以使用 HEAD 请求方式来获取资源的元数据，包括 ETag 值。

fetch('/resource-url', { method: 'HEAD' })
  .then((response) => {
    const etag = response.headers.get('etag') || response.headers.get('last-modified');
    if (isNewVersionAvailable(etag)) {
      // 执行更新逻辑，例如重新加载页面或触发应用程序内部的更新流程
    }
  })
  .catch((error) => {
    console.error('Error fetching resource:', error);
  });

为什么要选择 HEAD 请求？是因为 HEAD 请求只会返回响应头，而不会返回响应体，这样可以减少请求资源的消耗。

这里，通过 response.headers.get('etag') 方法，可以获取到服务端返回的 ETag 值，需要注意的是，某些服务端可能不会返回 ETag 值，这时候可以使用 last-modified 字段来代替。

接下来，就是判断 ETag 值是否有变化，如果有变化，则说明有新版本可用，这时候就可以执行更新逻辑了。我们可以使用 localStorage 来存储 ETag 值，以便下次检测时进行比较。

function isNewVersionAvailable(etag) {
  const lastETag = localStorage.getItem('lastETag');
  localStorage.setItem('lastETag', etag);

  return etag !== lastETag;
}

至此，一个简单的更新检测就实现了。