前端部署实现自动通知用户，清除浏览器缓存

前言

当在开发工作中是不是常常出现下面问题：
1.修复了bug重新部署，测试没清除缓存刷新页面还会复现这个bug，测试：你到底改好了吗？清缓存，清啥缓存？？？
2.前后端修改了接口对接方式重新部署，后端接口没有兼容处理，用户客户端没有及时刷新，可能会出现接口报错
3.更新了新的内容版块，用户没有收到更新通知，还是使用缓存版本，影响用户体验
为了更好的增强用户体验，下面介绍 plugin-web-update-notification 插件，客户端可以监听网页更新，通知用户刷新页面。

plugin-web-update-notification 原理

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

具体代码

我的项目是vue3+vite框架的，首先安装vite版本npm install @plugin-web-update-notification/vite，我安装的版本是1.7.1，然后在vite.config.ts文件上配置：

import { defineConfig, type UserConfigExport } from 'vite'
import { webUpdateNotice } from '@plugin-web-update-notification/vite'

export default ({ mode }: { mode: string }): UserConfigExport =>
  defineConfig({
    plugins: [
      webUpdateNotice({
        logVersion: true,
        locale: 'zh_CN',
        localeData: {
          zh_CN: {
            title: '📢 系统更新',
            description: '为了您更好的体验我们升级了系统，请您刷新页面体验最新版本。',
            buttonText: '刷新',
            dismissButtonText: '忽略'
          }
        }
      })
    ]
  })

效果

也可以根据需要写css样式

文章参考：

网页重新部署，通知用户-最佳实践：segmentfault.com/a/119000004…
vue项目打包部署后 浏览器自动清除缓存问题（解决方法）：blog.csdn.net/Maxueyingyi…
【Vue技巧之】生产部署自动更新提示：cloud.tencent.com/developer/a…