如何优雅的实现前端版本投产自动触发浏览器刷新更新版本内容

如何优雅的实现前端版本投产自动触发浏览器刷新更新版本内容

需求背景

前端项目版本投产后如果用户没有及时的拿到最新投产的资源包，可能会存在以下问题：

1. 缺少新功能或修复：如果最新的资源包含新功能或修复了现有的问题，但用户没有及时获取到它们，那么用户将无法及时的体验到这些新功能或修复的好处。

2. 安全问题：新版本的资源可能包含了安全性修复，修复了已知的漏洞或安全风险。如果用户没有及时的获取到这些修复，那么网站可能存在潜在的安全风险，容易受到攻击。

3. 程序报错：如果最新投产的版本包含了一些配合后端接口数据改造，比如后端接口数据结构或者字段发生了改变，但是前端静态资源JS没有获取到最新的，可能会导致程序报错，会严重影响到用户体验。

为了避免以上问题，确保在前端版本投产后，能及时获取到最新的前端静态资源，比如js、css和图片等，我们需要使用一种比较好的方案来实现该需求，那么，目前有哪些比较常见的解决方案呢？

前期调研

其实，检测前端项目版本内容变化自动刷新浏览器以更新版本内容的实现方案有不少，下面是目前常见的一些实现方案：

1. 轮询检测版本更新：

• 在前端代码中添加一个定时器，定期向服务器发送请求，检查是否有新的版本可用。
• 服务器端可以提供一个接口用于检查版本更新，比较当前客户端的版本号与服务器端最新版本号是否一致。
• 如果有新版本可用，前端代码可以自动触发页面刷新更新版本内容。

优缺点：实现起来简单粗暴，但是，定时轮询检测版本更新可能会对服务器端和客户端造成一定的负担，而且轮询时间间隔不好控制，多久轮询一次合适？

2. 使用服务端推送技术（Server-Sent Events，SSE）：

• Server-Sent Events 是一种基于HTTP的单向通信机制，允许服务器实时向客户端发送事件消息。
• 在前端代码中，通过创建 EventSource 对象来与服务器建立 SSE 连接，并监听服务器发送的消息。
• 当服务器检测到新版本时，可以向客户端发送一个 SSE 事件消息，客户端收到消息后触发浏览器自动刷新操作。

优缺点：SSE 的优点是它是一个简单而轻量级的协议，不需要额外的库或框架，适用于一些简单的实时通信场景。

3. 使用WebSocket实时通信：

• 建立WebSocket连接，使服务器能够实时向客户端发送消息。
• 当有新的版本可用时，服务器可以主动向客户端发送通知。
• 客户端收到通知后，可以自动触发浏览器刷新更新版本内容。

优缺点：通过WebSocket实时通信，服务器可以直接向客户端推送消息，无需进行轮询。当服务器检测到新版本时，它可以立即发送消息给客户端，客户端收到消息后触发浏览器自动刷新操作，实现版本内容自动更新。

这三种实现方案都需要后端配合，那有没有不需要后端配合，纯前端就能实现的方案呢？那必须有呀

纯前端实现版本投产自动刷新浏览器更新版本内容

使用nodejs脚本生成版本信息json文件 + 监听页面显示和隐藏会触发的visibilitychange事件，纯前端实现版本投产自动刷新浏览器更新版本内容

大致实现原理：

1. 使用nodejs编写脚本，获取git版本相关信息（必须包含git commitId，用于版本对比），并保存为json文件，存放在构建打包的目录下（比如，public目录）。
2. 使用页面显示和隐藏会触发的 visibilitychange事件，监听页面的显示和隐藏操作，如果页面显示，则请求打包放在dist根目录下的版本信息json文件，对比当前打包版本的 commitId与历史版本信息json文件中 commitId是否一致，如果不一致，则触发浏览器刷新。
3. vite打包项目使用