网站检测更新提示

薛定喵君

发布于 2023-05-13 14:44:55

8140

发布于 2023-05-13 14:44:55

文章被收录于专栏：薛定喵君薛定喵君

记录下检测vue项目代码更新并提示的简易实现

背景

系统新功能上线后需要提示用户刷一下页面才能体验，下面介绍一种纯前端的简单实现方式。

实现方法介绍

该方法适用于vue做的单页应用项目。

思路：轮询比较首页(index)页面内引用脚本的hash值，判断脚本有无变化，有变化就通知用户并进行页面刷新。

参考代码

可以在vue项目App.vue的创建回调中参考增加如下代码来实现。

const axios = require('axios');
let resp = await axios({
  method: 'get',
  url: '/',
  responseType: 'html'
})
let oldScript = resp.data.match(new RegExp(/<script(?:\s+[^>]*)?>(.*?)<\/script\s*>/ig))
let tipTimer = setInterval(async () => {
  let newHtml = await axios({
    method: 'get',
    url: '/',
    responseType: 'html'
  })
  let newScript = newHtml.data.match(new RegExp(/<script(?:\s+[^>]*)?>(.*?)<\/script\s*>/ig))
  const oldScriptLen = oldScript.length
  const arr = Array.from(new Set(oldScript.concat(newScript)))
  if (arr.length !== oldScriptLen) {
    this.$notify({
      title: '更新提醒',
      message: '检测到系统功能有升级，关闭提示后自动刷新获取更新',
      type: 'success',
      duration: 0,
      onClose: () => {
         location.reload();
    }
    });
    clearInterval(tipTimer);
  }
}, 7000)

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-05-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除

网站