前端每次发版提示用户

vue前端现在每次发版本想提示用户刷新页面,主要思路如下

  1. public 中创建 JSON 文件,设置版本号为数字 1
// version.json
{ "version": 1 }
  1. 编写 node 脚本,每次发版本,运行脚本将版本号自增 1
// versionHandle.js
const fs = require('fs')
const path = require('path')

const configFile = path.resolve(__dirname, './asd.json')
const data = fs.readFileSync(configFile, 'UTF-8') // 读文件

const newData = JSON.parse(data)
++newData.version

fs.writeFileSync(configFile, JSON.stringify(newData)) // 写入文件
// package.json
  "scripts": {
    "dev": // ...
    // 每次打包运行脚本
    "build": "vite build --config ./vite.config.ts && node ./versionHandle.js", 
  },
  1. 创建 js 文件,开启 web worker 线程,使用 fetch 轮询 这个 json 文件,若是版本号不同则弹框提示用户,引导用户刷新
fetch('/version.json').then(response => response.json()).then(res => {
	console.log(100, res) // 拿到当前版本号,对比本地储存的版本号,若是不一致则弹框
})

注意: worker 中是访问不到 window 、document、和缓存类型 API 的,所以只有 fetch 的轮询操作放在 worker 中,其他操作放在主线程中执行

  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值