系统在发布后,会有希望用户刷新的业务场景。本文仅为 前端发布,纯前端实现提示
的场景提供一种思路/方案。如果后端发布也要触发提醒刷新,那一般只能通过接口交互方案来触发前端提示。
方案原理及使用前提
方案的核心原理是轮询 index.html
,对比 html
内容是否一致,若不一致,则提示刷新。故使用该方案的前提是:让 index.html
每次发版前后内容产生不一致。
一般来说,现代化前端项目每次发版,所引用 JS 的文件名 chunkhash
值都会发生变化,故 index.html
中的 script src 属性
一定会发生变化。
如果因技术架构导致无法通过 chunkhash
来判断,那就要考虑通过其他方式让 html
产生变化。
比如:构建时,在 index.html
中,
- 注入当前 git-分支的 HEAD hash
- 注入当前打包时间
- …(任何你能想到的变化标识值)
注入的方式有很多种:
- 修改 webpack 配置,加入 process.env 变量(如:增加
process.env.APP_VERSION
,在index.html
中使用该变量) - 在打包机上识别 html 文件并写入内容(如:匹配
</body>
标签,在前面插入<script> window.buildTime = new Date().valueOf(); </script>
) - …(任何在打包环节可以变动 html 的钩子)