網站更新后，怎么通知用戶刷新？vue純前端檢測（保姆級教程）

題背景

網站更新后，解決了某些bug，但是用戶未刷新網頁，還在瀏覽網站更新前內容……

然后用戶說：“bug根本沒解決??！”

我說：“你刷新下頁面啊”

用戶說：“嗯，好了”

那么，有沒有一種方式，可以直接通知用戶網站有更新，提示用戶主動刷新頁面呢？

有！當然有

說明

本項目以vue2舉例，其他的Vue3、React等，請自行實現。

假設你基于git提交代碼，以下從git的commit head中獲取唯一值

（注：或者其他可行方式替代，自行實現）

解決方案 - 純前端檢測

還有其他解決方案，如：從服務器獲取版本號，輪詢查詢等。

但上述都有性能問題、或需要服務端配合、或需要添加一些配置項，顯得麻煩，讀者可自行選擇

1.生成唯一標識

在vue打包的時候，編寫一個腳本，存儲提交的commit head作為hash值，也就是唯一標識。

在vue.config.js的同級，新建一個release.js文件：

const execSync = require('child_process').execSync;
const fs = require('fs');
const path = require('path');

const dirName = path.dirname(__filename);

// 執行git命令，獲取當前HEAD指針所指向的提交的完整哈希值
const gitHead = execSync('git rev-parse HEAD', {
  cwd: path.resolve(dirName, './')
}).toString().trim()
// 只取前十個數字或字母
const hash = gitHead.substring(0, 10);

// 版本號：時間戳+git的hash值
const version = Date.now() + '_' + hash;

// .env.production文件路徑
const envFile = path.join(dirName, './.env.production');

// 讀取目標文件，并通過正則判斷.env.production文件中是否有VITE_APP_VERSION開頭的環境變量
try {
  const data = fs.readFileSync(envFile, {
    encoding: 'utf-8',
  });
  const reg = /VUE_APP_VERSION=\d+_[\w-_+:]{7,14}/g;
  const releaseStr = `VUE_APP_VERSION=${version}`;
  let newData = '';
  if (reg.test(data)) {
    newData = data.replace(reg, releaseStr);
    fs.writeFileSync(envFile, newData);
  } else {
    newData = `${data}\n${releaseStr}`;
    fs.writeFileSync(envFile, newData);
  }
  console.log(`插入release版本信息到 env.production 完成，版本號：${version}`);
} catch (e) {
  console.error(e);
}

上述代碼，把提交的git commit head值取前10位數，再加上時間戳組成hash值。

并且把該值寫入.env.production文件，變量名為VUE_APP_VERSION

2.hash對比

用戶登錄的時候，把版本號的hash值本地存儲

import Cookies from "js-cookie";
Cookies.set('app_version', process.env.VUE_APP_VERSION)

然后在路由守衛中，比較緩存值app_version、與當前獲取的process.env.VUE_APP_VERSION值是否相等

相等：說明沒更新，
不相等：則說明網站更新了，因為網站發布后會重新生成一個VUE_APP_VERSION值，那么這時候就要提示用戶更新了

路由守衛permisssion.js的關鍵代碼如下

import Cookies from "js-cookie";
import { Message, MessageBox } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'

// 是否首次進入網頁，首次不校驗刷新
let isFirstEntry = true;

// 檢測網站更新
function checkUpdate() {
  // 系統的版本號
  const system_app_version = process.env.VUE_APP_VERSION
  // 瀏覽器的版本號
  const web_app_version = Cookies.get('app_version')
  if(isFirstEntry) {
    isFirstEntry = false
  } else {
    // 如果不存在系統的版本號，則設置系統版本號，第一次不提示刷新，否則換個瀏覽器又提示了
    if(!web_app_version) {
      Cookies.set('app_version', system_app_version)
    } else {
      // 如果瀏覽器的版本號不等于系統的版本號，則重設瀏覽器的版本號，并提示刷新
      if (system_app_version !== web_app_version) {
        console.log('版本號不一致')
        refreshTip(system_app_version)
      }
    }
  }
}

// 刷新提示
function refreshTip(system_app_version) {
  MessageBox.confirm('當前網站內容有更新，是否刷新頁面？', '提示', {
    confirmButtonText: '立即刷新',
    cancelButtonText: '忽略',
    type: 'warning'
  }).then(() => {
    Cookies.set('app_version', system_app_version)
    window.location.reload()
  }).catch(() => {
    console.log('取消了')
    Cookies.set('app_version', system_app_version)
  })
}

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getToken()) {
	to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else { 
      // 只在生產環境檢測是否有版本更新
	  if(process.env.NODE_ENV === 'production') {
        checkUpdate()
      }
	}
}

上述方法是在在用戶切換菜單時，監聽路由變化來檢測是否更新，這是比較常用的方法。

此外，有的人會輪詢檢測是否有更新，這樣會損耗性能且不優雅。

請讀者自行選擇觸發的時機。

最后

最后，在打包時，修改一下打包命令，執行release.js并打包

修改package.json文件：

'scripts': {
	"build:prod": "node ./release.js && vue-cli-service build",
}

恭喜你，大功告成了！

關于作者

作者在CSDN社區叫：“前端沒錢”

CSDN主頁地址：https://blog.csdn.net/yan1915766026

作者是前端開發人員，會經常發布一些好用的工具、方法，并且持續更新《若依nodejs全棧教程》希望幫助更多的前端開發人員。

感謝關注！

HTML 5 也被稱為 Web Applications 1.0。為了實現這個目標，增加了幾個為 Web 頁面提供交互體驗的新元素：

details

datagrid

command

這些元素都可以根據用戶的操作和選擇改變顯示的內容，而不需要從服務器裝載新頁面。

details

details 元素表示在默認情況下可能不顯示的詳細信息?？蛇x的 legend 元素可以提供詳細信息的摘要。

details 元素的用途之一是提供腳注和尾注。例如：

The bill of a Craveri's Murrelet is about 10% thinner

than the bill of a Xantus's Murrelet.

<legend>[Sibley, 2000]</legend>

<p>Sibley, David Allen, The Sibley Guide to Birds,

(New York: Chanticleer Press, 2000) p. 247

</p>

</details>

沒有指定具體的顯示方式。瀏覽器可以選用腳注、尾注和工具提示等方式。

每個 details 元素可以有一個 open 屬性。如果設置了這個屬性，那么詳細信息在最初就顯示出來。如果沒有設置這個屬性，那么會隱藏它們，直到用戶要求顯示它們。無論是哪種情況，用戶都可以通過單擊一個圖標或其他控件來顯示或隱藏詳細信息。

datagrid

datagrid 元素提供一個網格控件?？梢杂盟@示樹、列表和表格，用戶和腳本可以更新這些界面元素。與之相反，傳統的表格主要用來顯示靜態數據。

datagrid 從它的內容（一個 table、select 或其他 HTML 元素）獲得初始數據。例如，代碼 9 中的 datagrid 包含一張成績表。在這個示例中，datagrid 的數據來自一個 table。更簡單的一維 datagrid 可以從 select 元素獲得數據。如果使用其他 HTML 元素，那么每個子元素成為網格中的一行。

<table>

<tr><td>Jones</td><td>Allison</td><td>A-</td><td>B </td><td>A</td></tr>

<tr><td>Smith</td><td>Johnny</td><td>A</td><td>C </td><td>A</td></tr>

<tr><td>Willis</td><td>Sydney</td><td>C-</td><td>D</td><td>F</td></tr>

<tr><td>Wilson</td><td>Frank</td><td>B-</td><td>B </td><td>A</td></tr>

</table>

</datagrid>

這個元素與常規表格的區別在于，用戶可以選擇行、列和單元格；把行、列和單元格折疊起來；編輯單元格；刪除行、列和單元格；對網格排序；以及在客戶機瀏覽器中直接進行其他數據操作?？梢杂?JavaScript 代碼監視更新。Document Object Model（DOM）中增加了 HTMLDataGridElement 接口以支持這個元素（代碼 10　HTMLDataGridElement）。

interface HTMLDataGridElement : HTMLElement {

attribute DataGridDataProvider data;

readonly attribute DataGridSelection selection;

attribute boolean multiple;

attribute boolean disabled;

void updateEverything();

void updateRowsChanged(in RowSpecification row, in unsigned long count);

void updateRowsInserted(in RowSpecification row, in unsigned long count);

void updateRowsRemoved(in RowSpecification row, in unsigned long count);

void updateRowChanged(in RowSpecification row);

void updateColumnChanged(in unsigned long column);

void updateCellChanged(in RowSpecification row, in unsigned long column);

};

還可以使用 DOM 在網格中動態地裝載數據。也就是說，datagrid 可以不包含那些提供初始數據的子元素?？梢杂靡粋€ DataGridDataProvider 對象設置它（代碼 11　DataGridDataProvider）。這樣就可以從數據庫、XmlHttpRequest 或者 JavaScript 代碼能夠訪問的任何資源裝載數據。

interface DataGridDataProvider {

void initialize(in HTMLDataGridElement datagrid);

unsigned long getRowCount(in RowSpecification row);

unsigned long getChildAtPosition(in RowSpecification parentRow,

in unsigned long position);

unsigned long getColumnCount();

DOMString getCaptionText(in unsigned long column);

void getCaptionClasses(in unsigned long column, in DOMTokenList classes);

DOMString getRowImage(in RowSpecification row);

HTMLMenuElement getRowMenu(in RowSpecification row);

void getRowClasses(in RowSpecification row, in DOMTokenList classes);

DOMString getCellData(in RowSpecification row, in unsigned long column);

void getCellClasses(in RowSpecification row, in unsigned long column,

in DOMTokenList classes);

void toggleColumnSortState(in unsigned long column);

void setCellCheckedState(in RowSpecification row, in unsigned long column,

in long state);

void cycleCell(in RowSpecification row, in unsigned long column);

void editCell(in RowSpecification row, in unsigned long column, in DOMString data);

};

menu 和 command

menu 元素實際上在 HTML 2 中就出現了。在 HTML 4 中廢棄了它，但是 HTML 5 又恢復了它并指定了新的意義。在 HTML 5 中，menu 包含 command 元素，每個 command 元素引發一個操作。例如，代碼 12 HTML 5 菜單　是一個彈出警告框的菜單。

<menu>

<commandlabel="Do 1st Command"/>

<commandlabel="Do 3rd Command"/>

</menu>

還可以用 checked="checked" 屬性將命令轉換為復選框。通過指定 radiogroup 屬性，可以將復選框轉換為單選按鈕，這個屬性的值是互相排斥的按鈕的組名。

除了簡單的命令列表之外，還可以使用 menu 元素創建工具欄或彈出式上下文菜單，這需要將 type 屬性設置為 toolbar 或 popup。例如，代碼　13. HTML 5 工具欄　顯示一個與 WordPress 等 blog 編輯器相似的工具欄。它使用 icon 屬性鏈接到按鈕的圖片。

<commandlabel="strong" icon="bold.gif"/>

<commandlabel="b-quote" icon="blockquote.gif"/>

<commandlabel="ul" icon="bullet.gif"/>

<commandlabel="ol" icon="number.gif"/>

<commandlabel="li" icon="item.gif"/>

</menu>

label 屬性提供菜單的標題。例如，代碼14. HTML 5 Edit 菜單　顯示一個 Edit 菜單。

<commandlabel="Cut"/>

</menu>

菜單可以嵌套在其他菜單中，形成層次化的菜單結構。

TML是網頁的標準格式，具有良好的可讀性和可訪問性以及更強的可編輯性。與PDF相比，HTML文檔更容易進行修改和更新。將PDF轉換為HTML后，文檔內容可以在各種瀏覽器和設備上自由查看，為用戶提供更便捷的訪問體驗。

另外將PDF轉成HTML網頁后也有助于提升信息的傳播和分享效率，由于HTML文檔可以直接在瀏覽器中打開，用戶可以方便地與他人分享和傳播文檔內容，無需擔心格式兼容性問題。

那么如何將PDF轉成HTML網頁呢？

方法一：

使用在線轉換工具是最簡單、最快捷的方式之一。一些在線工具例如smallpdf中文版、speedpdf、ilovepdf中文版等都提供了PDF轉HTML的功能；

它們的操作方法也非常簡單，跟其他在線工具不同的是smallpdf中文版還支持一鍵批量轉換和下載，所以下面用smallpdf中文版操作步驟為例：

1、打開瀏覽器輸入smallpdf中文版搜索并找到官網并進入，在首頁找到或直接在右上角的搜索框查找并選擇PDF轉HTML進入轉換；

2、點擊“選擇文件”添加需要轉換的PDF文件；接著勾選“文件名稱”前的邊框，右上角就會出現“批量轉換”按鈕，點擊即可一鍵開始轉換已添加的所有文檔，無需一個一個點擊轉換。等待轉換完成后同樣的一鍵批量下載即可。

方法二：

另外也可以使用轉換器來實現，有一個PDF轉換器是可以將PDF轉成HTML的，例如極速玩轉，操作方法如下：

1、打開極速玩轉轉換器，在“PDF轉換”中找到并選擇“PDF轉HTML”；

2、將所有需要轉換的PDF文件拖到轉換區域后，點擊右下角的開始轉換即可一鍵批量處理。

以上就是將PDF文件轉成網頁的兩種方法，可以根據實際需要選擇合適的方法。

在線咨詢

上一篇：64 位字節長度的銀行余額“對任何人來說都足夠了嗎”？譯文
下一篇：查看瀏覽器網頁星號密碼的方法，簡單無需軟件，小白一看就會

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

網站更新后，怎么通知用戶刷新？vue純前端檢測（保姆級教程）

題背景

說明

解決方案 - 純前端檢測

1.生成唯一標識

2.hash對比

最后

關于作者

您的項目需求

網站更新后，怎么通知用戶刷新？vue純前端檢測（保姆級教程）