【更新提醒】Web 实现更新提醒

[z0ffy]

在web项目日常更新中经常会遇到，代码更新后用户无感知。导致功能异常或者体验不到新功能。

因此需要更新提醒机制来主动告知用户，系统有更新需要重新加载。

以下方案暂不考虑轮询引起的压力问题。

基本原理：请求远端标记与当前标记做判断，不一致则更新。

方案一：请求静态文件

• 在 vue，react 等项目打包完成之后会生成静态js文件。
• js文件名称格式一般为 name+hash.ext，因此可以利用hash来进行判断是否有更新。
• 轮询请求入口html文件。利用正则获取 例如app_hash.js中的hash值，与当前文件中的hash值做比对，如果一致说明无更新，如果不一致给出更新提醒。

优势

• 纯依赖前端，快
• 无需进行环境区分，直接请求当前环境文件即可

不足

• 无法进行更精细化管理。只要hash不一致就会给出提醒
• 更新后 hash 如果未发生变化，则会视为无更新

方案二：请求约定文件

• 在打包完成后，在固定位置以及html中生成更新标记文件（更新标记的生成可由自动化脚本完成，更新标记可视情况决定是否需要），更新标记需包含以下内容
  • 标识：版本号、commit id或其他
  • 环境：dev、pro或其他
• 轮询请求更新标记，按照环境获取对应的标识与入口html中的标识来进行判断是否需要触发更新。

优势

• 解决方案一的不足
• 不受项目限制，可按约定全项目通用

不足

• 更新标记生成需要额外成本

注意

• 在请求静态文件或者更新标记时 GET 请求会有缓存，导致文件内容不更新
  • 可在请求url后增加 _t 参数，参数值为时间戳
  • 更换 POST 请求
• 部署方式不同可能会导致异常
  • 部署方式一：（入口html，静态资源）-> 服务器。一起更新则无问题。
  • 部署方式二：（静态资源）-> oss -> (入口html) -> 服务器。
    • 方案一无问题
    • 方案二则会发生：触发了更新提醒，但是刷新后依旧显示旧页面的问题。原因是因为静态资源更新时入口文件并为更新，此时如果刷新页面，则还是旧版本入口文件。因此需要增加逻辑判断，当入口文件中的标识与更新标记文件中的标识一致时才会触发更新。