fm-version-check-update

一个轻量级的 Web 应用版本检查更新 SDK，自动检测应用版本变化并提示用户刷新页面。

✨ 功能特性

• 🔄 自动版本检测：通过轮询机制自动检测应用版本更新
• 💾 本地存储：使用 localStorage 存储版本标识，避免重复提示
• 🎯 智能轮询：页面可见时自动检查，不可见时停止轮询以节省资源
• 🎨 优雅提示：检测到更新时显示美观的更新提示弹窗
• 📦 轻量级：体积小，无外部依赖

📦 安装

npm install fm-version-check-update

🚀 快速开始

Script 标签引入

<script src="./node_modules/fm-version-check-update/dist/fm-version-check-update.min.js"></script>
<script>
  window.addEventListener('load', function () {
    if (window.initCheckVersion) {
      window.initCheckVersion('myApp', 10000) // 项目标识，检查间隔（毫秒）
    }
  })
</script>

ES6 模块引入

import initCheckVersion from 'fm-version-check-update'

initCheckVersion('myApp', 10000)

CommonJS 引入

const initCheckVersion = require('fm-version-check-update')

initCheckVersion('myApp', 10000)

📖 API

initCheckVersion(key, interval)

初始化版本检查功能。

参数：

| 参数 | 类型 | 必填 | 说明 | | ---------- | -------- | ---- | ------------------------------------------------------------------------------------- | | key | string | 是 | 项目标识，用于在 localStorage 中存储版本标识的 key。最终存储的 key 为 {key}_Version | | interval | number | 否 | 检查间隔（毫秒），默认值为 10000ms（10 秒）。最小值为 10000ms |

示例：

// 基本使用（使用默认间隔 10 秒）
initCheckVersion('myApp')

// 自定义检查间隔（20秒）
initCheckVersion('myApp', 20000)

🔍 工作原理

1. 版本标识生成：获取页面 HTML，提取所有 <script src="..."> 标签路径，计算 hash 值作为版本标识
2. 版本检测：首次运行保存版本标识到 localStorage，后续通过轮询定期检查
3. 更新提示：检测到版本变化时显示更新提示弹窗
4. 性能优化：页面不可见时停止轮询，可见时恢复

⚠️ 注意事项

Webpack 配置要求

确保 webpack 配置使用 contenthash，这样每次代码更新后文件名会变化：

// webpack.config.js
module.exports = {
  output: {
    filename: 'js/[name].[contenthash:8].js'
  }
}

开发环境测试

开发环境文件名固定不变，无法检测版本变化。可通过以下方式测试：

• 修改 webpack 配置，开发环境也使用 hash
• 手动清除 localStorage：localStorage.removeItem('your-project-key_Version')
• 使用生产构建进行测试

浏览器兼容性

• 需要支持 localStorage API
• 需要支持 fetch API（或使用 polyfill）
• 需要支持 ES6+ 语法（或使用 Babel 转译）

📝 示例代码

Vue 项目

<script>
import initCheckVersion from 'fm-version-check-update'

export default {
  mounted() {
    initCheckVersion('vue-app', 10000)
  }
}
</script>

React 项目

import { useEffect } from 'react'
import initCheckVersion from 'fm-version-check-update'

function App() {
  useEffect(() => {
    initCheckVersion('react-app', 10000)
  }, [])

  return <div>你的应用内容</div>
}

❓ 常见问题

Q: 为什么修改代码后没有检测到版本更新？

A: 确保 webpack 配置使用了 contenthash。

Q: 如何清除已保存的版本标识？

A: 在浏览器控制台执行：localStorage.removeItem('your-project-key_Version')

Q: 检查间隔可以设置为小于 10 秒吗？

A: 不可以。为了性能考虑，最小检查间隔为 10 秒。

📄 许可证

MIT License

🔗 相关链接

• GitHub 仓库
• npm 包
• 问题反馈