中文字幕一区二区三区在线中文-日本中文字幕 在线观看-欧美日韩国产亚洲综合-性色AV一二三天美传媒

廣州總部電話:020-85564311
20年
互聯(lián)網(wǎng)應(yīng)用服務(wù)商
廣州總部電話:020-85564311
20年
互聯(lián)網(wǎng)應(yīng)用服務(wù)商
請輸入搜索關(guān)鍵詞
知識庫 知識庫

優(yōu)網(wǎng)知識庫

探索行業(yè)前沿,共享知識寶庫

前端如何優(yōu)雅通知用戶刷新頁面?

發(fā)布日期:2025-02-01 10:08:19 瀏覽次數(shù): 1028 來源:稀土掘金技術(shù)社區(qū)

前言

老板:新的需求不是上线了嘛,怎么用户看到的还是老的页面呀
窝囊废:让用户刷新一下页面,或者清一下缓存
老板:那我得告诉用户,刷新一下页面,或者清一下缓存,才能看到新的页面呀,感觉用户体验不好啊,不能直接刷新页面嘛?
窝囊废:可以解决(OS:一点改的必要没有,用户全是大聪明)

产品介绍

c端需要经常进行一些文案调整,一些老版的文字字眼可能会导致一些舆论问题,所以就需要更新之后刷新页面,让用户看到新的页面。

思考问题为什么产生

项目是基于vue的spa应用,通过nginx代理静态资源,配置了index.html协商缓存,js、css等静态文件Cache-Control,按正常前端重新部署后, 用户重新访问系统,已经是最新的页面。

但是绝大部份用户都是访问页面之后一直停留在此页面,这时候前端部署后,用户就无法看到新的页面,需要用户刷新页面。

产生问题

  • 如果后端接口有更新,前端重新部署后,用户访问老的页面,可能会导致接口报错。
  • 如果前端部署后,用户访问老的页面,可能无法看到新的页面,需要用户刷新页面,用户体验不好。
  • 出现线上bug,修复完后,用户依旧访问老的页面,仍会遇到bug。

解决方案

  1. 前后端配合解决
  • WebSocket
  • SSE(Server-Send-Event)
  1. 纯前端方案 以下示例均以vite+vue3为例;
  • 轮询html Etag/Last-Modified

在App.vue中添加如下代码

const oldHtmlEtag = ref();const timer = ref();const getHtmlEtag = async () => {const { protocol, host } = window.location;const res = await fetch(`${protocol}//${host}`, {headers: {"Cache-Control": "no-cache",},});return res.headers.get("Etag");};
oldHtmlEtag.value = await getHtmlEtag();clearInterval(timer.value);timer.value = setInterval(async () => {const newHtmlEtag = await getHtmlEtag();console.log("---new---", newHtmlEtag);if (newHtmlEtag !== oldHtmlEtag.value) {Modal.destroyAll();Modal.confirm({title: "检测到新版本,是否更新?",content: "新版本内容:",okText: "更新",cancelText: "取消",onOk: () => {window.location.reload();},});}}, 30000);
  • versionData.json

自定义plugin,项目根目录创建/plugins/vitePluginCheckVersion.ts

import path from "path";import fs from "fs";export function checkVersion(version: string) {return {name: "vite-plugin-check-version",buildStart() {const now = new Date().getTime();const version = {version: now,};const versionPath = path.join(__dirname, "../public/versionData.json");fs.writeFileSync(versionPath, JSON.stringify(version), "utf8", (err) => {if (err) {console.log("写入失败");} else {console.log("写入成功");}});},};}

在vite.config.ts中引入插件

import { checkVersion } from "./plugins/vitePluginCheckVersion";plugins: [vue(),checkVersion(),]

在App.vue中添加如下代码

const timer = ref()const checkUpdate = async () => {let res = await fetch('/versionData.json', {headers: {'Cache-Control': 'no-cache',},}).then((r) => r.json())if (!localStorage.getItem('demo_version')) {localStorage.setItem('demo_version', res.version)} else {if (res.version !== localStorage.getItem('demo_version')) {localStorage.setItem('demo_version', res.version)Modal.confirm({title: '检测到新版本,是否更新?',content: '新版本内容:' + res.content,okText: '更新',cancelText: '取消',onOk: () => {window.location.reload()},})}}}
onMounted(()=>{clearInterval(timer.value)timer.value = setInterval(async () => { checkUpdate()}, 30000)})
  • plugin-web-update-notification

Use

// vite.config.tsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { webUpdateNotice } from '@plugin-web-update-notification/vite'
// https://vitejs.dev/config/export default defineConfig({plugins: [vue(),webUpdateNotice({logVersion: true,}),]}


優(yōu)網(wǎng)科技,優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應(yīng)服務(wù)商

優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質(zhì)服務(wù)" 的經(jīng)營理念,誠信務(wù)實的服務(wù)了近萬家客戶,成為眾多世界500強、集團和上市公司的長期合作伙伴!

優(yōu)網(wǎng)科技成立于2001年,擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合,致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)(品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用(手機站、APP開發(fā))、微信定制開發(fā)(微信官網(wǎng)、微信商城、企業(yè)微信)等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。


我要投稿

姓名

文章鏈接

提交即表示你已閱讀并同意《個人信息保護(hù)聲明》

專屬顧問 專屬顧問
掃碼咨詢您的優(yōu)網(wǎng)專屬顧問!
專屬顧問
馬上咨詢
掃一掃馬上咨詢
掃一掃馬上咨詢

掃一掃馬上咨詢