乐趣区

关于vue.js:网页重新部署通知用户最佳实践

为什么须要

如果用户打网页后,长时间不敞开对应标签页,也不刷新页面(在中后盾治理我的项目挺常见的),且期间服务器页面有更新,可能会存在以下问题:

  1. 单页利用,如果前端部署是全量更新的话(倡议增量更新),用户跳转其余页面,可能会 404, 因为对应资源曾经不存在了。
  2. 如果后端接口有更新,且没做兼容解决的话,会影响数据准确性,也可能间接报错。
  3. 一个紧急 bug,你修复并公布了,用户如果没刷新页面,还是能够复现。
  4. 用户长期应用历史版本,影响用户体验。
  5. 老板和销售:不是说好的明天更新吗,怎么页面还是老样子。
    你:刷新下页面就好了
    老板和销售:怎么刷新页面啊?
    你:😤

plugin-web-update-notification

监听网页更新,并告诉用户刷新页面的插件,反对 ViteWebpackumi

没错,最佳实际就是这个插件。

github | npm | 文档

原理

git commit hash (也反对 package.json versionbuild timestampcustom) 为版本号,打包时将版本号写入一个 json 文件,同时注入客户端运行的代码。客户端轮询服务器上的版本号(浏览器窗口的visibilitychangefocus 事件辅助),和本地作比拟,如果不雷同则告诉用户刷新页面。

长处

  1. 接入简略,装置插件,批改配置文件即可,不必批改业务代码(如果不自定义行为)。

    // 以 vite 为例
    import {defineConfig} from 'vite'
    import vue from '@vitejs/plugin-vue'
    import {webUpdateNotice} from '@plugin-web-update-notification/vite'
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [vue(),
        webUpdateNotice({logVersion: true,}),
      ]
    })
  2. 反对多种版本号类型:

    • git commit hash(默认)。
    • package.json 中的 version 字段。(倡议搭配 bumpp 食用最佳)
    • build timestamp,运行打包命令时的工夫戳。
    • custom,用户自定义版本号。
  3. 预置了一个简洁的更新 Notification,能够自定义文案、款式、地位。当然也能够勾销默认的 Notification,监听到更新事件后自定义行为。

  4. 预置的 Notification 文案反对国际化。
  5. tiny, 注入的 jscss 文件压缩后不到 2kb。
  6. 欠缺的 ts 类型提醒。
  7. issue 响应急时 …

什么时候会检测更新

检测:通过 fetch 加载服务器上的 version.json 文件(会疏忽本地缓存)。

  1. 首次加载页面。
  2. 轮询(default: 10 60 1000 ms)。
  3. js 脚本资源加载失败 (404 ?)。
  4. 标签页 visibilitychangefocus 事件为 true 时。(按目前公司的我的项目来看,大多数更新是这个时候命中的,轮询反而少些)

对于时效性

有人说轮询如果频率太慢了,时效性会比拟差。

我感觉影响不大。用户个别不会长时间放弃这个标签页在前台,很有可能会切换到其余标签页或间接切出浏览器做其余操作,这时如果你回到以后标签页,会触发 visibilitychange 事件,立即检测更新。所以大多数更新应该是在visibilitychangefocus 事件中命中的,轮询反而是一个辅助兜底的伎俩。

轮询对服务器的压力?

感觉应该问题不大,只是轮询服务器上的一个 json 文件。

// version.json
{"version": "f29e8de"}

而且如果用户来到(不敞开)以后标签页时,插件会临时进行轮询的行为。从新回到页面后,会立即查看一次并开启轮询。

是否独自起一个 web worker 跑检测更新工作

看到有相似性能的插件会独自起一个 worker 来运行检测更新工作,为了不影响主线程。

集体感觉没有太大必要,因为检测更新工作只是简略的 fetch json 文件,而后做下本地与近程的版本比照,应该能够说是毫无压力。反而运行一个 web worker 会占用内存和 cpu

插件对打包内容做了哪些变动

源码

monorepo 模式组织代码,原理简略,代码也比较简单。

core: 次要是如何获取版本号。

injectScript: 注入到客户端运行的代码。

injectStyle: 预置的 Notification css 款式。

vite plugin: vite 插件的实现。

webpack plugin: webpack 插件的实现。

umi plugin: umi 插件的实现。

e2e test: vite 插件的基于 playwrighte2e 测试。

为什么不应用 ** 计划?

websocket

须要一个 websocket 服务, 还须要后端配合。

service worker(pwa)

印像中老版本的 vue-router 文档就是基于 service worker 做的更新告诉。

接入 service worker 须要老本,本地运行一个 worker 也会占用内存和 cpu 资源。

国内并不风行 pwa

最次要是的它具备拦挡并解决网络申请的能力,如果你不相熟,很有可能造成强缓存,手动强制刷新页面都无奈更新。参考审慎解决 Service Worker 的更新。

如果非要应用的话,倡议应用 vite-plugin-pwa,插件曾经内置了更新提醒性能,开发也不必关怀如何更新 sw.js

比照 html 文件里引入的 js 文件 hash

不反对监听动态资源的更新。

轮询加载 version.json 应该比加载 index.html 对服务器的压力小些吧。

webpack 打包时给文件门路加 hash 的性能是能够被敞开的。

查看 index.html Response headEtagLast-Modified

须要服务端开启缓存。另外, 一些代理服务和负载平衡设施也可能在转发 HTTP 申请和响应时在 EtagLast-Modified 之前去除这些头信息,以缩小网络负载和进步性能。

不反对监听动态资源的更新。

退出移动版