网站更新后，怎么通知用户刷新？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 元素表示在默认情况下可能不显示的详细信息。可选的 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对比

最后

关于作者

您的项目需求