如何在SSR Nuxt应用中检测服务端构建更新 解决新旧版本兼容问题

现有PWA方案无日志输出排查步骤 #

Workbox has been loaded.日志未输出的问题，按以下顺序排查：

• 确认已安装@nuxtjs/pwa依赖，未安装可执行npm i @nuxtjs/pwa或yarn add @nuxtjs/pwa安装
• 确认nuxt.config.js的modules数组中已注册PWA模块：

  modules: [
    '@nuxtjs/pwa'
  ]
  

• 开发环境下Workbox默认处于禁用状态，需要手动开启才会加载：

  // nuxt.config.js
  pwa: {
    workbox: {
      enabled: true // 仅开发调试时开启，生产环境默认自动开启
    }
  }
  

排查完成后重新构建项目即可看到对应日志输出。

更轻量的无PWA依赖版本检测方案 #

如果你不需要PWA相关能力，可以用更通用的版本号比对方案实现更新检测，无需额外依赖：

1. 配置构建版本号 #

在nuxt.config.js中注入构建时生成的版本号：

export default {
  publicRuntimeConfig: {
    // 用时间戳作为版本号，每次构建都会生成新值
    appVersion: Date.now().toString()
  },
  plugins: [
    { src: '~/plugins/version-update.js', mode: 'client' }
  ]
}

2. 编写版本检测插件 #

创建plugins/version-update.js文件：

export default ({ $config, app }) => {
  const localVersion = $config.appVersion
  const CHECK_INTERVAL = 5 * 60 * 1000 // 5分钟检测一次

  // 版本检测逻辑
  const checkVersionUpdate = async () => {
    try {
      // 拉取首页HTML解析最新的版本号
      const res = await fetch('/', { cache: 'no-store' })
      const htmlText = await res.text()
      const versionMatch = htmlText.match(/appVersion":"(\d+)"/)
      if (!versionMatch) return

      const latestVersion = versionMatch[1]
      if (latestVersion !== localVersion) {
        if (confirm('应用已发布新版本，点击确定刷新页面加载最新内容')) {
          window.location.reload()
        }
      }
    } catch (err) {
      console.debug('版本检测请求失败', err)
    }
  }

  // 路由切换时触发检测
  app.router.afterEach(() => {
    checkVersionUpdate()
  })

  // 定时触发检测
  setInterval(checkVersionUpdate, CHECK_INTERVAL)
}

该方案无需依赖PWA能力，所有SSR Nuxt项目都可以直接使用，构建后每次更新版本都会自动触发用户侧的刷新提示。

内容的提问来源于stack exchange，提问作者Čamo