纯前端实现页面检测更新提示

2020/12/11 JavaScript 本文共1749字,阅读全文约需6分钟 本文总阅读量

  开发过程中,经常遇到页面更新、版本发布时,需要告诉使用人员刷新页面的情况,甚至有些运营、测试人员觉得切换一下菜单再切回去就是更新了web页面资源,有的分不清普通刷新和强刷的区别,所以实现了一个页面更新检测功能,页面更新了自动提示使用人员刷新页面。

  基本思路为:使用 webpack 配置编译时在 js 文件名里添加 hash,然后使用js向${window.location.origin}/index.html发送请求,解析出html文件里引入的js文件名称hash,对比当前 js 的 hash 与新版本的 hash 是否一致,不一致则提示用户更新版本。

// uploadUtils.jsx
import React from 'react';
import axios from 'axios';
import { notification, Button } from 'antd';

// 弹窗是否已展示(可以改用闭包、单例模式等)
let uploadNotificationShow = false;

const close = () => {
  uploadNotificationShow = false;
};

const onRefresh = (new_hash) => {
  close();
  // 更新localStorage版本号信息
  window.localStorage.setItem('XXXSystemFrontVesion', new_hash);
  // 刷新页面
  window.location.reload(true);
};

const openNotification = (new_hash) => {
  uploadNotificationShow = true;
  const btn = (
    <Button type='primary' size='small' onClick={() => onRefresh(new_hash)}>
      确认更新
    </Button>
  );
  notification.open({
    message: '版本更新提示',
    description: '检测到系统当前版本已更新,请刷新后使用。',
    btn,
    // 不自动关闭
    duration: 0,
    onClose: close,
  });
};

// 获取hash
export const getHash = () => {
  // 如果提示弹窗没有展示
  if (!uploadNotificationShow) {
    // 在 js 中请求首页地址,这样不会刷新界面,也不会跨域
    axios
      .get(`${window.location.origin}/index.html?time=${new Date().getTime()}`)
      .then((res) => {
        // 匹配index.html文件中引入的js文件是否变化(具体正则,视打包时的设置及文件路径而定)
        let new_hash = res.data && res.data.match(/\/static\/js\/main.(.*).js/);
        // console.log(res, new_hash);
        new_hash = new_hash ? new_hash[1] : null;
        // 查看本地版本
        let old_hash = localStorage.getItem('XXXSystemFrontVesion');
        if (!old_hash) {
          // 如果本地没有,则存储版本信息
          onRefresh(new_hash);
        } else if (new_hash && new_hash != old_hash) {
          // 本地已有版本信息,但是和新版不同:版本更新,弹出提示
          openNotification(new_hash);
        }
      });
  }
};

使用:

import { getHash } from '../uploadUtils';

let timer = null;
componentDidMount() {
    getHash();
    timer = setInterval(() => {
      getHash();
      // 10分钟检测一次
    }, 600000)
  }

  componentWillUnmount () {
      // 页面卸载时清除
    clearInterval(timer);
  }

  解合Console Importer直接在控制台面板查看:

uploadpage

Search

    欢迎与我交流

    江南逰子

    Table of Contents