网页重新部署，通知用户-最佳实践

为什么需要

如果用户打网页后，长时间不关闭对应标签页，也不刷新页面（在中后台管理项目挺常见的），且期间服务器页面有更新，可能会存在以下问题：

1. 单页应用，如果前端部署是全量更新的话（建议增量更新），用户跳转其他页面，可能会 404, 因为对应资源已经不存在了。

2. 如果后端接口有更新，且没做兼容处理的话，会影响数据准确性，也可能直接报错。

3. 一个紧急 bug，你修复并发布了，用户如果没刷新页面，还是可以复现。

4. 用户长期使用历史版本，影响用户体验。

5. 老板和销售：不是说好的今天更新吗，怎么页面还是老样子。

你：刷新下页面就好了

老板和销售：怎么刷新页面啊？

你：😤

plugin-web-update-notification

监听网页更新，并通知用户刷新页面的插件，支持 Vite、 Webpack、 umi

没错，最佳实践就是这个插件。

github | npm | 文档

原理

以 git commit hash (也支持 package.json version、build timestamp、custom) 为版本号，打包时将版本号写入一个 json 文件，同时注入客户端运行的代码。客户端轮询服务器上的版本号（浏览器窗口的visibilitychange、focus 事件辅助），和本地作比较，如果不相同则通知用户刷新页面。

优点