hookehuyr

新增页面更新刷新检测

...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-26 23:52:36 3 * @Date: 2022-05-26 23:52:36
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2024-06-24 17:18:44 5 + * @LastEditTime: 2024-06-24 17:43:51
6 * @FilePath: /data-table/src/App.vue 6 * @FilePath: /data-table/src/App.vue
7 * @Description: 7 * @Description:
8 --> 8 -->
...@@ -32,6 +32,7 @@ import { styleColor } from "@/constant.js"; ...@@ -32,6 +32,7 @@ import { styleColor } from "@/constant.js";
32 import { getFormSettingAPI } from "@/api/form.js"; 32 import { getFormSettingAPI } from "@/api/form.js";
33 import { showDialog } from 'vant'; 33 import { showDialog } from 'vant';
34 import fp3 from '@/utils/fp3'; 34 import fp3 from '@/utils/fp3';
35 +import { Updater } from '@/utils/versionUpdater';
35 36
36 // 使用 include + pinia 状态管理动态缓存页面 37 // 使用 include + pinia 状态管理动态缓存页面
37 const store = mainStore(); 38 const store = mainStore();
...@@ -189,6 +190,25 @@ onMounted(async () => { ...@@ -189,6 +190,25 @@ onMounted(async () => {
189 // console.log(visitorId) 190 // console.log(visitorId)
190 // }) 191 // })
191 } 192 }
193 +
194 + // TAG:检查是否更新
195 + if (import.meta.env.PROD) {
196 + const upDater = new Updater({
197 + time: 30000
198 + })
199 + upDater.on('no-update', () => {
200 + // console.log('还没更新')
201 + })
202 + upDater.on('update', () => {
203 + showDialog({
204 + title: '温馨提示',
205 + message: '检测到新版本,将会刷新页面!',
206 + }).then(() => {
207 + window.location.reload();
208 + });
209 + })
210 + }
211 +
192 }); 212 });
193 </script> 213 </script>
194 214
......
1 +/*
2 + * @Date: 2024-02-06 11:38:13
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-02-06 13:04:25
5 + * @FilePath: /xysBooking/src/utils/versionUpdater.js
6 + * @Description:
7 + */
8 +/* eslint-disable */
9 +/**
10 + * @description: 版本更新检查
11 + * @param {*} time 阈值
12 + * @return {*}
13 + */
14 +export class Updater {
15 + constructor(options = {}) {
16 + this.oldScript = [];
17 + this.newScript = [];
18 + this.dispatch = {};
19 + this.init(); //初始化
20 + this.timing(options.time); //轮询
21 + }
22 +
23 + async init() {
24 + const html = await this.getHtml();
25 + this.oldScript = this.parserScript(html);
26 + }
27 +
28 + async getHtml() {
29 + // TAG: html的位置需要动态修改
30 + const html = await fetch(import.meta.env.VITE_BASE).then((res) => res.text()); //读取index html
31 + return html;
32 + }
33 +
34 + parserScript(html) {
35 + const reg = new RegExp(/<script(?:\s+[^>]*)?>(.*?)<\/script\s*>/gi); //script正则
36 + return html.match(reg); //匹配script标签
37 + }
38 +
39 + //发布订阅通知
40 + on(key, fn) {
41 + (this.dispatch[key] || (this.dispatch[key] = [])).push(fn);
42 + return this;
43 + }
44 +
45 + compare(oldArr, newArr) {
46 + const base = oldArr.length;
47 + // 去重
48 + const arr = Array.from(new Set(oldArr.concat(newArr)));
49 + //如果新旧length 一样无更新
50 + if (arr.length === base) {
51 + this.dispatch['no-update'].forEach((fn) => {
52 + fn();
53 + });
54 + } else {
55 + //否则通知更新
56 + this.dispatch['update'].forEach((fn) => {
57 + fn();
58 + });
59 + }
60 + }
61 +
62 + timing(time = 10000) {
63 + //轮询
64 + setInterval(async () => {
65 + const newHtml = await this.getHtml();
66 + this.newScript = this.parserScript(newHtml);
67 + this.compare(this.oldScript, this.newScript);
68 + }, time);
69 + }
70 +}