搜索

前端重新部署如何使用WebWorker优雅地通知用户刷新网页?

前端大神之路

共 12818字，需浏览 26分钟

 · 2024-04-11

本文对部署后通知用户刷新网页感兴趣的小伙伴阅读。

欢迎关注 前端早茶 ，与广东靓仔携手共同进阶～

文章转载于：Zayn

https://juejin.cn/post/7329280514628534313

前言

周五晚上组里说前端有bug，正在吃宵夜的我眉头一紧，立即打开了钉钉（手贱...），看了一下这不是前几天刚解决的吗，果然，使用刷新大法就解决，原因不过是用户一直停留在页面上，新的版本发布后，没有刷新拿不到新的资源。现在大部分的前端系统都是SPA，用户在使用中对系统更新无感知，切换菜单等并不能获取最新资源，如果前端是覆盖性部署，切换菜单请求旧资源，这个旧资源已经被覆盖（hash打包的文件），还会出现一直无响应的情况。那么，当前端部署更新后，提示一直停留在系统中的用户刷新系统很有必要。

解决方案

  1. 在public文件夹下加入manifest.json文件，记录版本信息

  2. 前端打包的时候向manifest.json写入当前时间戳信息

  3. 在入口JS引入检查更新的逻辑，有更新则提示更新

  • 路由守卫router.beforeResolve（Vue-Router为例）,检查更新，对比manifest.json文件的响应头Etag判断是否有更新
  • 通过Worker轮询，检查更新，对比manifest.json文件的响应头Etag判断是否有更新。当然你如果不在乎这点点开销，可不使用Worker另开一个线程

Public下的加入manifest.json文件 

      
      {
  "timestamp":1706518420707,
  "msg":"更新内容如下：\n--1.添加系统更新提示机制"
}
这里如果是不向用户提示更新内容，可不填，前段开发者也无需维护manifest.json的msg内容，这里主要考虑到如果用户在填长表单的时候，填了一大半，你这时候给用户弹个更新提示，用户无法判断是否影响当前表单填写提交，如果将更新信息展示出来，用户感知更新内容，可判断是否需要立即刷新，还是提交完表单再刷新。

webpack向manifest.json写入当前时间戳信息 

      
       // 版本号文件
    const filePath = path.resolve(`./public`, 'manifest.json')
    // 读取文件内容
    readFile(filePath, 'utf8', (err, data) => {
      if (err) {
        console.error('读取文件时出错:', err)
        return
      }
      // 将文件内容转换JSON
      const dataObj = JSON.parse(data)
      dataObj.timestamp = new Date().getTime()
      // 将修改后的内容写回文件
      writeFile(filePath, JSON.stringify(dataObj), 'utf8', err => {
        if (err) {
          console.error('写入文件时出错:', err)
          return
        }
      })
    })
如果你无需维护更新内容的话，可直接写入timestamp 
      
      // 生成版本号文件
const filePath = path.resolve(`./public`, 'manifest.json')
writeFileSync(filePath, `${JSON.stringify({ timestamp: new Date().getTime() })}`)

检查更新的逻辑

入口文件main.js处引入

我这里检查更新的文件是放在utils/checkUpdate

      
      // 检查版本更新
import '@/utils/checkUpdate'
checkUpdate文件内容如下 
      
      import router from '@/router'
import { Modal } from 'ant-design-vue'
if (process.env.NODE_ENV === 'production') {
  let lastEtag = ''
  let hasUpdate = false
  let worker = null

  async function checkUpdate() {
    try {
      // 检测前端资源是否有更新
      let response = await fetch(`/manifest.json?v=${Date.now()}`, {
        method: 'head'
      })
      // 获取最新的etag
      let etag = response.headers.get('etag')
      hasUpdate = lastEtag && etag !== lastEtag
      lastEtag = etag
    } catch (e) {
      return Promise.reject(e)
    }
  }

  async function confirmReload(msg = '', lastEtag) {
    worker &&
      worker.postMessage({
        type: 'pause'
      })
    try {
      Modal.confirm({
        title: '温馨提示',
        content: '系统后台有更新，请点击“立即刷新”刷新页面\n' + msg,
        okText: '立即刷新',
        cancelText: '5分钟后提示我',
        onOk() {
          worker.postMessage({
            type: 'destroy'
          })
          location.reload()
        },
        onCancel() {
          worker &&
            worker.postMessage({
              type: 'recheck',
              lastEtag: lastEtag
            })
        }
      })
    } catch (e) {}
  }

  // 路由拦截
  router.beforeResolve(async (to, from, next) => {
    next()
    try {
      await checkUpdate()
      if (hasUpdate) {
        worker.postMessage({
          type: 'destroy'
        })
        location.reload()
      }
    } catch (e) {}
  })

  // 利用worker轮询
  worker = new Worker(
    /* webpackChunkName: "checkUpdate.worker" */ new URL('../worker/checkUpdate.worker.js', import.meta.url)
  )

  worker.postMessage({
    type: 'check'
  })
  worker.onmessage = ({ data }) => {
    if (data.type === 'hasUpdate') {
      hasUpdate = true
      confirmReload(data.msg, data.lastEtag)
    }
  }
}

这里因为缺换路由本来就要刷新页面，用户可无需感知系统更新信息，直接通过请求头的Etag即可，这里的Fetch方法就用head获取相应头就好了。

checkUpdate.worker.js文件如下

      
      let lastEtag
let hasUpdate = false
let intervalId = ''
async function checkUpdate() {
  try {
    // 检测前端资源是否有更新
    let response = await fetch(`/manifest.json?v=${Date.now()}`, {
      method: 'get'
    })
    // 获取最新的etag和data
    let etag = response.headers.get('etag')
    let data = await response.json()
    hasUpdate = lastEtag !== undefined && etag !== lastEtag
    if (hasUpdate) {
      postMessage({
        type: 'hasUpdate',
        msg: data.msg,
        lastEtag: lastEtag,
        etag: etag
      })
    }
    lastEtag = etag
  } catch (e) {
    return Promise.reject(e)
  }
}

// 监听主线程发送过来的数据
addEventListener('message', ({ data }) => {
  if (data.type === 'check') {
    // 每5分钟执行一次
    // 立即执行一次，获取最新的etag，避免在setInterval等待中系统更新，第一次获取的etag是新的，但是lastEtag还是undefined，不满足条件，错失刷新时机
    checkUpdate()
    intervalId = setInterval(checkUpdate,5 * 60 * 1000)
  }
  if (data.type === 'recheck') {
    // 每5分钟执行一次
    hasUpdate = false
    lastEtag = data.lastEtag
    intervalId = setInterval(checkUpdate,  5 * 60 * 1000)
  }
  if (data.type === 'pause') {
    clearInterval(intervalId)
  }
  if (data.type === 'destroy') {
    clearInterval(intervalId)
    close()
  }
})
如果不使用worker直接讲轮询逻辑放在checkUpdate即可

Worker引入

从 webpack 5 开始，你可以使用  Web Workers [1] 代替  `worker-loader` [2]。 
      
      new Worker(new URL('./worker.js', import.meta.url));

以下版本的就只能用`worker-loader`[3]咯

也可以逻辑写成字符串，然后通过ToURL给new Worker，如下：

      
      function createWorker(f) {
  const blob = new Blob(['(' + f.toString() +')()'], {type: "application/javascript"});
  const blobUrl = window.URL.createObjectURL(blob);
  const worker = new Worker(blobUrl);
  return worker;
}

createWorker(function () {
  self.addEventListener('message', function (event) {
    // 消费信息
      self.postMessage('send message')
  }, false);
})

worker数据通信

      
      // 主线程
var uInt8Array = new Uint8Array(new ArrayBuffer(10));
for (var i = 0; i < uInt8Array.length; ++i) {
  uInt8Array[i] = i * 2; // [0, 2, 4, 6, 8,...]
}
worker.postMessage(uInt8Array);
// Worker 线程
self.onmessage = function (e) {
  var uInt8Array = e.data;
  postMessage('Inside worker.js: uInt8Array.toString() = ' + uInt8Array.toString());
  postMessage('Inside worker.js: uInt8Array.byteLength = ' + uInt8Array.byteLength);
};

但是，拷贝方式发送二进制数据，会造成性能问题。比如，主线程向 Worker 发送一个 500MB 文件，默认情况下浏览器会生成一个原文件的拷贝。为了解决这个问题，JavaScript 允许主线程把二进制数据直接转移给子线程，但是一旦转移，主线程就无法再使用这些二进制数据了，这是为了防止出现多个线程同时修改数据的麻烦局面。这种转移数据的方法，叫做Transferable Objects[4]。这使得主线程可以快速把数据交给 Worker，对于影像处理、声音处理、3D 运算等就非常方便了，不会产生性能负担。

如果要直接转移数据的控制权，就要使用下面的写法。

      
      // Transferable Objects 格式
worker.postMessage(arrayBuffer, [arrayBuffer]);

// 例子
var ab = new ArrayBuffer(1);
worker.postMessage(ab, [ab]);
Web Worker 使用教程 - 阮一峰的网络日志 (ruanyifeng.com) [5]然而，并不是所有的对象都可以被转移。只有那些被设计为可转移的对象（用[ Transferable ] IDL 扩展属性修饰），比如ArrayBuffer、MessagePort，ImageBitmap，OffscreenCanvas，才能通过这种方式来传递。转移操作是不可逆的，一旦对象被转移，原始上下文中的引用将不再有效。转移对象可以显著减少复制数据所需的时间和内存。

参考资料

[1]

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers: https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FWeb_Workers_API%2FUsing_web_workers

[2]

https://github.com/webpack-contrib/worker-loader: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fwebpack-contrib%2Fworker-loader

[3]

https://github.com/webpack-contrib/worker-loader: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fwebpack-contrib%2Fworker-loader

[4]

http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects: https://link.juejin.cn?target=http%3A%2F%2Fwww.w3.org%2Fhtml%2Fwg%2Fdrafts%2Fhtml%2Fmaster%2Finfrastructure.html%23transferable-objects

[5]

https://www.ruanyifeng.com/blog/2018/07/web-worker.html: https://link.juejin.cn?target=https%3A%2F%2Fwww.ruanyifeng.com%2Fblog%2F2018%2F07%2Fweb-worker.html

最后

关注我，一起携手进阶

欢迎关注前端早茶，与广东靓仔携手共同进阶～

浏览 3
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
偷偷告诉你如何一台电脑开多个微信！
大家好，我是轩辕。前几天在粉丝群里，有人问我是怎么在一台电脑上同时登录两个微信的？正好之前写过一篇文章，分析过原理，分享给没看过的小伙伴学习一下。手机端多开微信估计很多人都知道，像华为、小米等手机系统都对此做了支持，不过在运行Windows系统的电脑上怎么启动两个微信呢？其实很简单，你只需要写一个批
编程技术宇宙
0
合一云2024年五一劳动节放假安排通知
亲爱的用户： &amp;amp;amp;nbsp; &amp;amp;amp;nbsp; &amp;amp;amp;nbsp;“五一”劳动节即将到来，根据《国务院办公厅关于2024年部分节假日安排的通知》并结合网站的实际情况，现将合一云2024年“五一”劳动节放假安排通知如下: &amp;amp;amp;nbsp; &amp;amp;amp;nbsp; 一、放假时间：2024年5月1日（星期三）至2024年5月5日（
合一云
0
测试新人，如何快速上手一个陌生的系统！
大家好，我是狂师！作为刚入行不久的测试新人，面对一个陌生的系统时，可能会感到有些手足无措。面对一个全新的系统系统，如何快速上手并展开有效的测试工作是一个重要的挑战。本文将探讨测试新人如何通过一系列步骤和策略，快速熟悉并掌握新系统的测试要点，从而提高测试效率和质量。本文旨在为测试新手提供一份指导，帮助
测试开发技术
0
如何计算数据中心的冷却需求？
  今日分享  【导读】数据中心的冷却要求受多种因素影响，包括设备的热量输出、占地面积、设施设计和电气系统功率额定值等等……众所周知，环境因素会严重影响数据中心设备。过多的热量积聚会损坏服务器，可能导致其自动关闭。经常在高于可接受的温度下运行服务器会缩短其使用
数据中心运维管理
0
多人同时导出 Excel 干崩服务器！新来的阿里大佬给出的解决方案太优雅了！
点击关注公众号，Java 干货及时推送↓推荐阅读：面试辅导，我们出大成果了！来源：juejin.cn/post/7259249904777838629前言 业务诉求：考虑到数据库数据日渐增多，导出会有全量数据的导出，多人同时导出可以会对服务性能造成影响，导出涉及到mysql查询的io操作，
Java技术栈
1
GPT的风也吹到了CV，详解自回归视觉模型的先驱！ ImageGPT：使用图像序列训练图像 GPT模型
作者丨科技猛兽编辑丨极市平台导读 在 CIFAR-10 上，iGPT 使用 linear probing 实现了 96.3% 的精度，优于有监督的 Wide ResNet，并通过完全微调实现了 99.0% 的精度，匹配顶级监督预训练模型。本文目录1 自回归视觉模型的先驱 ImageGPT：
机器学习初学者
0
只写后台管理的前端要怎么提升自己
大厂技术  高级前端  Node进阶点击上方 程序员成长指北，关注公众号回复1，加入高级Node交流群本人写了五年的后台管理。每次面试前就会头疼，因为写的页面除了表单就是表格。抱怨过苦恼过也后悔过（虽然我现在已经心安理得的摆烂），但是站在现在的时间点
程序员成长指北
1
【性能监控】如何有效监测网页静态资源大小？
前言作为前端人员肯定经常遇到这样的场景：需求刚上线，产品拿着手机来找你，为什么页面打开这么慢呀，心想自己开发的时候也有注意性能问题呀，不可能会这么夸张。那没办法只能排查下是哪一块影响了页面的整体性能，打开浏览器控制台一看，页面上的这些配图每张都非常大，心想这些配图都这么大，页面怎么快，那么我们有没有
高级前端进阶
0
机房水冷空调管路应该如何安装布局？
    近年来随着云计算技术的快速发展，全球数据中心开始向着巨型化的方向发展，单机柜功率密度不断提高，5KW、7KW、10KW甚至几十KW功率机柜已逐步成为常规配置。新一代数据中心更显著的表现为：规模更大、密度更高、制冷要求更高、局部过热成为常态等特点。本文就来探讨下水
数据中心运维管理
0
如何减少网页卡顿
大厂技术  高级前端  Node进阶点击上方 程序员成长指北，关注公众号回复1，加入高级Node交流群前言经常听人说，“不要阻塞主线程”，或者 “减少长耗时 "，该如何做呢？聊网站性能的文章有很多，通常为了提高 js 性能，避不开这两点：不要阻塞主线
程序员成长指北
0
点赞
评论
收藏
分享

手机扫一扫分享

举报