fm-check-version-update
v1.0.0
Published
一个轻量级的Web应用版本检查更新库，通过ETag/Last-Modified自动检测版本更新并提示用户刷新
Downloads
100
Maintainers
hongxue354Readme
fm-check-version-update
一个轻量级的Web应用版本检查更新库，通过ETag/Last-Modified自动检测版本更新并提示用户刷新页面。
特性
- 🚀 轻量级，无依赖
- 🔄 自动检测版本更新（基于ETag/Last-Modified）
- 💡 智能轮询（仅在页面可见时检查）
- 🎨 优雅的更新提示UI
- 📦 支持ES模块（ESM）
安装
npm install fm-check-version-update或使用 yarn：
yarn add fm-check-version-update使用方法
基础用法
import { initCheckVersion } from 'fm-check-version-update';
// 初始化版本检查
initCheckVersion('my-project-version', 10000); // 每10秒检查一次参数说明
key(string, 必需): localStorage存储的键名，用于区分不同项目interval(number, 必需): 检查间隔时间（毫秒）
完整示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的应用</title>
</head>
<body>
<h1>我的应用</h1>
<script type="module">
import { initCheckVersion } from 'fm-check-version-update';
// 初始化版本检查
// 参数1: localStorage键名（建议使用项目名称）
// 参数2: 检查间隔（毫秒），建议10秒以上
initCheckVersion('my-app-version', 10000);
</script>
</body>
</html>在Vue项目中使用
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { initCheckVersion } from 'fm-check-version-update';
const app = createApp(App);
app.mount('#app');
// 初始化版本检查
initCheckVersion('vue-app-version', 10000);在React项目中使用
// index.js 或 App.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { initCheckVersion } from 'fm-check-version-update';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
// 初始化版本检查
initCheckVersion('react-app-version', 10000);工作原理
- 版本检测: 通过请求根路径（
/）获取响应头的ETag或Last-Modified值 - 版本对比: 将获取的值与localStorage中存储的值进行对比
- 智能轮询:
- 仅在页面可见时进行轮询检查
- 页面隐藏时自动停止轮询，节省资源
- 更新提示: 检测到版本变化时，显示优雅的更新提示弹窗
注意事项
- 服务器配置: 确保服务器正确返回
ETag或Last-Modified响应头 - 检查间隔: 建议设置10秒以上的检查间隔，避免过于频繁的请求
- localStorage键名: 不同项目应使用不同的键名，避免冲突
- 浏览器兼容性: 需要支持ES模块（ESM）的现代浏览器
API
initCheckVersion(key, interval)
初始化版本检查功能。
参数：
key(string): localStorage存储键名interval(number): 检查间隔（毫秒）
示例：
initCheckVersion('my-project-version', 10000);更新日志
1.0.0
- 初始版本发布
- 支持ETag/Last-Modified版本检测
- 智能轮询机制
- 优雅的更新提示UI
许可证
ISC
作者
huanghaiqi