当前位置：首页 > news >正文

利用TTP协议 ETag + 路由守卫实现前端发版后通知用户更新得一个方案

news 来源：原创 2025/4/26 12:40:20

利用 ETag 做提示更新的实现方案

ETag（Entity Tag）是万维网协议HTTP的一部分，是HTTP协议提供的若干机制中的一种Web缓存验证机制，是一个可以与Web资源关联的记号（token），并且允许客户端进行缓存协商，这使得缓存变得更加高效，而且节省带宽:

演示网站：http://www.xpclm.online/pdf-h5

原理：

1.首次请求资源：客户端通过HTTP GET请求向服务器请求/pdf-h5/资源。服务器处理请求后，生成资源的ETag，并在响应头中包含ETag返回给客户端。

2.资源缓存：客户端接收到资源后将其存储在本地缓存中，并记录下ETag（"68031a34-2a5"）值。

如图所示👇

3.后续请求资源：当客户端再次请求同一个资源时，会在请求头中包含之前缓存的ETag值。

4.服务器处理：服务器收到带有ETag的请求后，会比对服务器上当前资源的ETag和请求头中的ETag。如果ETag相同，表示资源没有改变，服务器就会返回304 Not Modified状态码，告诉客户端使用缓存中的资源即可。如果ETag不同，也表示资源已经更新，服务器就会返回200 OK状态码，并在响应体中包含新的资源内容和新的ETag

HTTP状态码304表示“Not Modified”，即资源未修改。

再次访问刷新访问界面👇

利用 ETag 做提示更新的实现思路👇

第一步：首次加载页面 将这个 ETag 值存储起来，比如存储在 localStorage 中。

第二步：定义路由守卫 这里我们选用全局前置守卫 beforeEach，因为它会在每次路由跳转前执行，客户端再次向服务器发送请求，获取 HTML 文件的响应头信息，从中提取新的 ETag 值。

第三步：对比 ETag 值 将新获取的 ETag 值与之前存储的 ETag 值进行比较。

示例代码：

import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';Vue.use(VueRouter);const router = new VueRouter({mode: 'history',routes
});// 定义检查更新的函数
function checkForUpdates() {return new Promise((resolve, reject) => {// 使用 fetch API 发送一个 HEAD 请求到 /index.htmlfetch('/index.html', {method: 'HEAD'}).then(response => {// 从响应头中获取 ETag 值const newEtag = response.headers.get('ETag');// 从 localStorage 中获取当前存储的 ETag 值const currentEtag = localStorage.getItem('etag');// 如果当前 ETag 存在且与新 ETag 不同，表示资源已更新if (currentEtag && currentEtag!== newEtag) {// 提示用户有新版本可用，建议刷新页面alert('新版本可用，请刷新页面以更新。');// 将新的 ETag 值存储到 localStorage 中localStorage.setItem('etag', newEtag);}resolve();}).catch(error => {// 如果请求失败，输出错误信息到控制台console.error('版本检查失败:', error);resolve();});});
}// 注册全局前置守卫
router.beforeEach(async (to, from, next) => {try {// 在路由跳转前检查更新await checkForUpdates();// 检查通过，继续路由跳转next();} catch (error) {// 检查出错，继续路由跳转next();}
});export default router;

路由呢每次路由切换都会执行版本检查，可能会增加一定的延迟。

也可以使用轮询 setInterval(checkForUpdates, 3600000)，但是消耗资源过大，但是也大不了多少，仁者见仁。。。

当然也可以使用WebSocket但是需要服务端支持。