版本迭代时如何自动让用户端更新版本

思路

今天遇到了这么一个需求，便是当服务商迭代软件版本时，前端如何自动获取到后端的更新信息然后自动完成版本更新。

起初，我根据之前的项目经验以及结合webpack的热更新机制，给出的方案是通过websocket服务来实现。实现方法便是当服务端更新版本后自动给前端发送一条更新信息，使前端发生更新，但是这样不仅需要改动服务端的代码，还需要一直建立websocket通信，非常的麻烦且不稳定。

实现

回家之后我苦思冥想，发现了前端工程化中有一个特性，便是当我们的工程打包之后，首页中会引入一个script标签，而打包策略中会给每一个文件加上一个文件指纹（如下图所示）：

每次打包，只要代码发生了变动，这个文件指纹肯定会发生变化。故我们可以得出结论，只要这个文件的文件指纹发生了变动，我们就认定为版本进行了迭代，我们便可以通过这个结论来实现业务代码，具体实现思路如下：

1. 给前端设置一个定时任务，每隔一段时间使用fetch请求一次，并且使用text解析返回结果获取首页的代码，并且给请求路径加上时间戳，避免缓存，如下图所示：

   fetch('https://admin.fishblog.cn/admin?t=时间戳').then(res => res.text()).then(html => {
     console.log(html)
   })

   

2. 根据这个返回结果我们可以通过正则来解析获取这段script；

   const reg = /\<script.*src=["'](?<src>[^"']+)/gm;

   拿到文件名称之后，我们可以定义一个变量将这个文件名存起来，用于和下一次请求结果做比对，只要下一次请求结果发生了变化， 我们就认定为功能发生了改变，软件发生了更新，迫使前端刷新来获取最新版本。