如何在PWA中设置版本号及最低支持版本并实现强制更新逻辑？

核心规则说明 #

你需要维护三类版本参数，按语义化版本（SemVer）规则逐级对比大小，实现分级更新逻辑：

• 本地用户当前安装版本：currentVersion
• 服务端配置的最低兼容版本：minRequiredVersion
• 线上最新可用版本：latestVersion

触发规则如下：

• 若 currentVersion < minRequiredVersion：触发强制更新，用户不可取消，必须完成升级才可正常使用站点
• 若 minRequiredVersion ≤ currentVersion < latestVersion：触发可选更新，可弹窗提示用户有新版本，由用户自主选择是否立即升级
• 若 currentVersion == latestVersion：无更新操作

规则匹配示例：
情况1：
current user version 1.2.3
min required version 1.2.5
new version 1.2.8
当前版本低于最低支持版本，用户必须更新到新版本才可继续使用站点

情况2：
current user version 1.2.6
min required version 1.2.5
new version 1.2.8
当前版本满足最低运行要求，用户可自行决定是否更新

具体实现步骤 #

1. 版本存储配置 #

• 前端打包时在根目录的version.json（或者manifest配置文件）中写入当前构建的版本号，示例配置：

{
  "currentVersion": "1.2.3",
  "minRequiredVersion": "1.1.5"
}

• 服务端维护一个版本查询接口，PWA每次启动/从后台切回前台时请求该接口，返回当前线上的minRequiredVersion和latestVersion参数

2. 版本对比工具函数 #

封装通用的语义化版本对比函数，用来判断两个版本号的大小关系：

/**
 * 版本对比函数
 * @param {string} v1 版本号1
 * @param {string} v2 版本号2
 * @returns 大于0则v1更新，等于0则版本相同，小于0则v2更新
 */
function compareVersion(v1, v2) {
  const v1Arr = v1.split('.').map(Number)
  const v2Arr = v2.split('.').map(Number)
  const maxLen = Math.max(v1Arr.length, v2Arr.length)
  for (let i = 0; i < maxLen; i++) {
    const num1 = v1Arr[i] || 0
    const num2 = v2Arr[i] || 0
    if (num1 > num2) return 1
    if (num1 < num2) return -1
  }
  return 0
}

3. 更新逻辑判断 #

拿到服务端返回的版本参数后，按规则判断更新类型：

// 读取本地存储的用户当前版本，首次安装默认设为0.0.0
const userCurrentVersion = localStorage.getItem('pwa_current_version') || '0.0.0'
// 请求服务端版本配置
const { minRequiredVersion, latestVersion } = await fetch('/api/pwa-version').then(res => res.json())

const compareMinRes = compareVersion(userCurrentVersion, minRequiredVersion)
const compareLatestRes = compareVersion(userCurrentVersion, latestVersion)

if (compareMinRes < 0) {
  // 触发强制更新：禁用页面所有交互，仅展示更新弹窗，更新完成前不允许操作
  showForceUpdateModal()
} else if (compareLatestRes < 0) {
  // 触发可选更新：弹窗提示新版本特性，提供「立即更新」「稍后再说」选项
  showOptionalUpdateModal()
}

4. PWA更新执行逻辑 #

触发更新后调用service worker的更新接口，安装完成后刷新页面生效即可：

function execPWAUpdate(latestVersion) {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.ready.then(registration => {
      registration.update().then(() => {
        // 更新完成后写入最新版本号到本地存储，刷新页面生效
        localStorage.setItem('pwa_current_version', latestVersion)
        window.location.reload()
      })
    })
  }
}

内容的提问来源于stack exchange，提问作者Mehdi Haghshenas