web前端浏览器实现版本更新

前言

        对前端人员来说，版本更新是一个很必要的功能，拿浏览器来说，前端实现版本更新需要做哪些呢？（uniapp做双端APP的版本热更新后续会发）

一、项目打包文件名加上时间戳

打包加上时间戳的目的是为了让每次打包好的js、css等文件的文件名不同，浏览器向服务器发起请求时，缓存里面没有，从而向服务器取最新的。因为这个打包加上时间戳比较常见且简单，有非常多的博主分享，我就不多说了，可以点以下链接去了解一下。

vue2、vue3如何在打包时加上时间戳

！！！但是在文件名里加上时间戳，浏览器就会乖乖向服务器请求最新的资源了吗？？？

首先了解一下浏览器的缓存机制浏览器缓存机制

那么问题来了，我们在打包时给文件名加上了时间戳，浏览器怎么会有缓存呢？？

是这样的，打包时只会对js、css等文件的文件名进行加时间戳的处理，但是index.html是不加时间戳的，我们知道，所有的资源都是在index.html引入的，如果index.html是旧的，那引入的js、css等资源也都是旧的，破案。

那么如果想要加载最新的index.html我们需要清空当前url的缓存

二、浏览器清空缓存方法

下面有四种浏览器清缓存的方法，采取第三种方法可以让浏览器向服务器请求所有最新的资源

① window.location.reload(false)

        方法会根据缓存的有效期和修改时间，决定是否重新从服务器下载内容。如果缓存的内容没有过期或没有修改，就会直接使用缓存，这样可以节省流量和时间。

②window.location.href = window.location.href

        方法会重新加载当前页面的URL，但是也可能使用缓存的内容。

③window.location.reload(true)

        方法会忽略缓存的内容，强制重新从服务器下载所有内容，包括 JavaScript 文件，图像，文本文件等。这样可以保证显示网页的最新内容，但是会消耗更多的流量和时间。

④window.location.replace(window.location.href)

        方法会把浏览器中的临时文件夹的文件删除再重新从服务器下载。这样可以清除一些可能造成问题的缓存文件，但是也会消耗更多的流量和时间。

三、什么时候清空缓存？

如果每次进入网页都清空缓存重新加载资源，会消耗更多的流量和时间。因此我们可以在本地代码store里面定义一个版本号（我是以时间来对比的），再让后端新增一个版本号参数的接口。每次发版打包前，修改本地代码store的版本号，修改线上版本号参数，保证本地代码的版本号和线上的版本号参数一样。

这样，每次进入该页面时，判断本地store的版本号是否和线上版本号一致，不一致弹出更新确认按钮。

// 检测是否有版本更新
import store from '@/store';
import { getConfigKey } from '@/api/system/config';
import { MessageBox } from 'element-ui';
export function detectNewVersion() {
	// replace(/-/g, '/') 兼容，safari浏览器只支持yyyy/mm/dd格式
	let loaclVersion = new Date(store.state.app.currentVersion.replace(/-/g, '/')).getTime();
	getConfigKey('sys.index.version').then((res) => {//请求线上版本号参数
		if (res.code != 200) return;
		let latest = new Date(res.msg.replace(/-/g, '/')).getTime();
		// 判断是否有变化
		if (loaclVersion != latest) {
			MessageBox.confirm('有新版本更新, 可能出现操作异常，请点击按钮更新?', '提示', {
				confirmButtonText: '更新',
				cancelButtonText: '取消',
			}).then(() => {
                //清空浏览器缓存
				window.location.reload(true)
			});
		}
	});
}