纯前端检测版本更新

前言

在单页应用（SPA）项目中，路由的变化并不会导致前端资源的重新加载。然而，当服务端进行了更新，例如接口的字段名或结构发生变化，而前端的静态资源没有同步更新时，可能会导致报错。对于那些长时间保持电脑开机且浏览器页面保持打开状态的用户来说，版本升级提示显得尤为重要。

• WebSocket
  建立一个 WebSocket 连接，服务器在发布新版本时通过 WebSocket 向客户端发送更新通知。

  优点：实时性强，能够即时通知客户端更新。
  缺点：需要额外的服务器资源来维护 WebSocket 连接，且可能受到网络延迟和稳定性问题的影响。

• 轮询检测（或页面跳转时请求）
  前端代码定期向服务器发送请求，检查是否有新版本发布。

  • 使用 setInterval 轮询固定时间段进行比较
  • 监听 visibilitychange 事件
  • 监听 focus 事件

  大部分情况使用 setInterval 设置一个合理的时间段即可，但当 tab 被切换时，浏览器的资源分配可能会受到限制，例如减少 CPU 和网络的使用，setInterval 的执行可能会受到影响。

  因此还需监听 visibilitychange 事件，当其选项卡的内容变得可见或被隐藏时，会在 document 上触发 visibilitychange 事件。

  但在 pc 端，从浏览器切换到其他应用程序并不会触发 visibilitychange 事件，所以加以 focus 辅佐；当鼠标点击过当前页面 (必须 focus 过)，此时切换到其他应用会触发页面的 blur 事件；再次切回到浏览器则会触发 focus 事件。

  使用 setInterval+visibilitychange+focus 便可解决绝大部分应用更新提示情况。如果更新频繁，对版本提示实时性要求较高的，还可以监听路由的变化，在路由切换时，获取版本的信息进行对比。

  优点：实现简单，不需要额外的服务器配置。 缺点：可能增加服务器负担，且有一定的延迟和性能开销。