背景
单页应用(Single Page Application,简称SPA)是一种现代Web应用程序架构,通过动态重载页面中的部分内容来提供更流畅和更响应式的用户体验。由于SPA在客户端(用户的浏览器)运行大量的JavaScript代码,并且与传统的多页应用不同,它不会每次操作都从服务器重新加载整个页面内容,因此在性能和用户体验上有显著优势。然而这种应用也存在一定弊端,譬如当服务端更新时(接口请求体和响应体结构发生变化),用户所使用的网页静态资源没有同步更新,就有可能导致报错。
前言在传统的多页Web应用中,每次用户访问页面时,都会从服务器获取最新的页面和资源,因此版本更新相对简单,用户总是能获取到最新的版本。然而,SPA在首次加载后,前端的静态资源会缓存在浏览器内存中,且在整个使用过程中通常不会自动重新加载。这种特性意味着如果应用有新的版本发布,用户可能仍在使用旧版本,无法立即获得最新的功能、修复或安全更新。
怎么实现?我们想实现这样一个效果,场景是:
攻城狮发版完成,客户端检测到有版本更新后给用户一个更新提示,让用户知道有新版本更新了
先来实现这个弹窗:
代码语言:javascript代码运行次数:0运行复制import { Modal } from 'antd';
function updateNotice() {
Modal.confirm({
title: '更新提示',
content: '检测到新版本,建议立即更新以确保平台正常使用。',
okText: '确认更新',
cancelText: '稍后更新',
onOk: () => {
window.location.reload();
},
});
}
方案一:比较构建文件的hash值该方案需要webpack开启打包文件带上hash值,具体配置不在此处展开。
通过定期获取服务器的前端资源,匹配资源中的 /gi;
// 获取匹配到的所有