Vue實現(xiàn)自動檢測以及版本的更新

更新時間：2023年03月31日 11:01:20 作者：迪迦

當用戶在當前站點停留時間比較長，中途站點進行升級更新之后，用戶如果不刷新頁面就任然停留在舊的頁面里，如何讓用戶收到一個提示，引導用戶進行更新操作呢？下面給大家介紹如何站點更新如何在生產(chǎn)環(huán)境提示用戶更新，進行頁面刷新操作，核心原理其實很簡單

一、思路

1，每隔一小段時間fetch請求一次服務器首頁數(shù)據(jù)，解析為純文本。

2，識別純文本里對應script標簽路徑文件指紋是否發(fā)生變動

3，有變動則彈框提示引導用戶進行刷新操作

二、實現(xiàn)步驟

1.調用fetch拿到首頁的html并且轉為純文本格式

核心代碼：

fetch('/').then(res=>res.text()).then(res=>console.log(res))

返回結果

由于vue是單頁面，所以返回數(shù)據(jù)一般都不多，一目了然如下：

<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset=UTF-8>
  <link rel=icon href=./favicon.ico> <meta name=viewport content="width=device-width,initial-scale=1">
  <script type=module crossorigin src=./assets/index.b3865953.js> </script> 
  <body>
    <div id=app></div><script src=./js/WsUtil.js type=text/javascript charset=utf-8></script>
  </body>
</html>

仔細觀察返回數(shù)據(jù)不難發(fā)現(xiàn)script標簽里的 <script type=module crossorigin src=./assets/index.b3865953.js> </script> 所對應的文件路徑是./assets/index.b3865953.js 這是由于前端工程化會自動給文件帶上文件指紋，只要這些文件有變動，那么這些文件指紋也就是hash值也會跟著變化，每隔一小段時間去分析頁面中script元素的js，只要發(fā)現(xiàn)js路徑有變化，說明這個系統(tǒng)是有所改動。

具體代碼如下:

//請求首頁，timestep是為了避免緩存數(shù)據(jù)

    //請求首頁
    async function newScripts(){
      const html = await fetch('/?timestep='+ Date.now()).then((res)=>res.text());
      scriptReg.lastIndex = 0;//正則分析頁面所有url地址
      let result = [];//保存分析數(shù)據(jù)到一個數(shù)組里
      let match;
      while((match=scriptReg.exec(html))){
        result.push(match.groups.src)
      }
      return result;//返回數(shù)組
    }

//數(shù)組里就記錄了這一次請求首頁在首頁當中所有的js的獲取地址

2.檢查是否需要更新

首先調用newScripts拿到當前頁所有js路徑

代碼如下：

  async function needUpdate(){
      const newScripts = await newScripts();//調用newScripts
      if(!lastSrcs){//如果之前沒有保存頁面js地址的話，進行一次保存，初始化并存下當前數(shù)據(jù)
          lastSrcs = newScripts;
          return false;
        }
        let result = false ;
        if(lastSrcs.length !== newScripts.length){
          result = true;
        }
        for(let i = 0;i<lastSrcs.length;i++){
          if(lastSrcs[i] !== newScripts[i]){
            result = true;
            break ;
          }
        }
      }
      lastSrcs = newScripts;
      return result;
    }

3.有則彈出

每隔兩秒調用 needUpdate檢查更新函數(shù)，判斷是否有變化，有更新則提示用戶刷新頁面，然后在調用自身，不斷的進行檢查，從而達到提示更新的目的。

代碼如下：

const timeData=2000;//檢查間隔時間
function autRef(){
  setTimeout(async()=>{
    const willUp = await needUpdate();//調用檢查更新函數(shù)
    if(willUp){
      const  result = confirm('數(shù)據(jù)更新點擊確認刷新當前頁')
    };
    if(result){
      location.reload();//刷新當前頁
    }
    autRef();
  },timeData)
}

這里只做了個簡單的彈窗，當然大家可以繼續(xù)優(yōu)化，可以寫成任意自己想要的樣子。

總結

以上就是今天要講的內容，本文僅僅簡單介紹了實現(xiàn)線上更新的一種思路，相比在生產(chǎn)環(huán)境下實現(xiàn)熱更新，或者是使用websocket相對來說都是比較麻煩的，而且還需要改動服務器，這種做法只需要一小段js函數(shù)即可解決，并且效率也是非常高的，對整個系統(tǒng)的運行，基本上是沒有任何負面影響，因為單頁面模式下，每次請求的頁面實際上傳輸?shù)臄?shù)據(jù)非常少，所以兩秒一次，完全不會給站點增加負荷。

到此這篇關于Vue實現(xiàn)自動檢測以及版本的更新的文章就介紹到這了,更多相關Vue檢測版本內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: