前端如何优雅通知用户刷新页面？
老板：新的需求不是上线了嘛，怎么用户看到的还是老的页面呀窝囊废：让用户刷新一下页面，或者清一下缓存老板：那我得告诉用户，刷新一下页面，或者清一下缓存，才能看到新的页面呀，感觉用户体验不好啊，不能直接刷新页面嘛？窝囊废：可以解决（OS：一点改的必要没有，用户全是大聪明）
c端需要经常进行一些文案调整，一些老版的文字字眼可能会导致一些舆论问题，所以就需要更新之后刷新页面，让用户看到新的页面。
项目是基于vue的spa应用，通过nginx代理静态资源，配置了index.html协商缓存，js、css等静态文件Cache-Control,按正常前端重新部署后， 用户重新访问系统，已经是最新的页面。
但是绝大部份用户都是访问页面之后一直停留在此页面，这时候前端部署后，用户就无法看到新的页面，需要用户刷新页面。
- 如果后端接口有更新，前端重新部署后，用户访问老的页面，可能会导致接口报错。
- 如果前端部署后，用户访问老的页面，可能无法看到新的页面，需要用户刷新页面，用户体验不好。
- 出现线上bug，修复完后，用户依旧访问老的页面，仍会遇到bug。
- 前后端配合解决
- WebSocket
- SSE(Server-Send-Event)
- 纯前端方案 以下示例均以vite+vue3为例；
- 轮询html Etag/Last-Modified
在App.vue中添加如下代码
- versionData.json
自定义plugin，项目根目录创建/plugins/vitePluginCheckVersion.ts
在vite.config.ts中引入插件
在App.vue中添加如下代码
- plugin-web-update-notification
Use
有想要的朋友：点赞后，私信【前端】免费领取完整版
JavaScript：如何修改URL而不重新加载页面？
HTML5 History API无疑是现代网站的发展方向，因为它完成了手头的任务，同时还提供了额外的功能。您可以根据需求使用history.pushState()或history.replaceState()在浏览器中修改URL：
两个方法的参数相同，允许您传递自定义的可序列化状态对象作为第一个参数、自定义标题（尽管大多数浏览器会忽略此参数）以及要在浏览器历史记录中添加/替换的URL。请记住，History API只允许相同的源URL，因此您无法导航到完全不同的网站。
旧的Location API不是该作业的最佳方案，因为它会重新加载页面，但是它仍然允许您修改当前URL，并且在使用旧浏览器时可能会很有用。您可以使用window.location.href、location.assign()或location.replace()修改URL：
如上所述，这三个选项都将导致页面重新加载，这可能是不希望的。此外，与使用History API不同，您只能设置URL，而不需要任何附加参数。最后，Location API不会限制您使用相同的源URL，但使用不同的源URL，这可能会导致安全问题。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
