Skip to content

Commit e488f47

Browse files
authored
Merge pull request #31 from guMcrey/feature/check-specified-files
Feature/check specified files
2 parents 500df07 + 5200300 commit e488f47

19 files changed

Lines changed: 414 additions & 454 deletions

.gitignore

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
11
.history
22
node_modules
3-
coverage
3+
coverage
4+
components/*.js
5+
components/version*.d.ts
6+
utils/*.js
7+
utils/*.d.ts
8+
index.js
9+
index.d.ts
10+
*.tgz

CHANGELOG.en-US.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,17 @@
66

77
---
88

9+
## 1.7.0
10+
11+
`2023-06-25`
12+
13+
- 🆕 Another method for real-time detection of web application version: By leveraging the browser's cache negotiation mechanism, it checks whether the content of the specified file address has been updated to determine if a new version is available.
14+
- Added `checkOriginSpecifiedFilesUrl` configuration option: After setting this property, the version will be monitored by "checking whether the specified file has been updated" instead of "managing the version number". Pass in a list of file addresses to be monitored, usually the index.html file under a domain name (string array type).
15+
- Added `checkOriginSpecifiedFilesUrlMode` configuration option: Supports two modes: 'one' / 'all'. 'one' means that if the content of one of the file addresses in the list changes, it will prompt for an update; 'all' means that it will prompt for an update only when the content of all file addresses in the list changes. (Only effective when checkOriginSpecifiedFilesUrl is configured)
16+
- Added `enable` configuration option: Whether to enable version monitoring. With this configuration option, version monitoring can be enabled only in specified environments (default is true).
17+
- Added `clearIntervalOnDialog` configuration option: Whether to clear the timer when the new version prompt dialog appears.
18+
- 💄 update README.md and README.zh-CN.md
19+
920
## 1.6.7
1021

1122
`2023-06-06`

CHANGELOG.zh-CN.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,17 @@
66

77
---
88

9+
## 1.7.0
10+
11+
`2023-06-25`
12+
13+
- 🆕 支持 Web 应用版本实时检测的另一种方法: 通过浏览器的协商缓存原理, 检测**指定文件地址内容是否有更新**来判断是否有新版本可用
14+
- 新增 `checkOriginSpecifiedFilesUrl` 配置项: 设置该属性后将使用 “通过检测指定文件是否有更新” 而不是 “通过管理版本号” 来监测版本, 传入希望监测的文件地址列表, 通常情况为某个域名下的 index.html 文件 (字符串数组类型)
15+
- 新增 `checkOriginSpecifiedFilesUrlMode` 配置项: 支持两种模式 'one' / 'all'. 'one' 表示列表中文件地址只要有一个内容发生改变即提示更新; 'all' 表示列表中文件地址都发生改变时才提示更新. (当 checkOriginSpecifiedFilesUrl 配置后才生效
16+
- 新增 `enable` 配置项: 是否启用版本监测, 通过该配置项可以设置版本监测只在指定环境下开启 (默认 true)
17+
- 新增 `clearIntervalOnDialog` 配置项: 当发现新版本提示弹窗出现后, 是否清空定时器
18+
- 💄 更新 README.md 和 README.zh-CN.md 文档
19+
920
## 1.6.7
1021

1122
`2023-06-06`

README.md

Lines changed: 41 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,9 @@ When is it suitable to use **to automatically send deployment messages to Lark o
5454
## Features
5555

5656
- Support all modern browsers
57-
- Available version real-time monitoring, support any version format, such as: 1.1.0, 1.1.1.0, 1.1.0-beta, etc.
57+
- Real-time detection of available versions is provided in two ways: 1. through managing version numbers; 2. by detecting updates in specified file contents
58+
- Managing version numbers supports any version format, such as 1.1.0, 1.1.1.0, 1.1.0-beta, etc.
59+
- Detecting updates in specified file contents supports any file on a remote server `v1.7.0`
5860
- Support personalized version popup text and theme, also support custom UI
5961
- Sync deployment message to Lark or WeCom group chat after successful deploy
6062
- Card text and templates for deployment messages support customization, and support the dynamically generated fields.
@@ -64,7 +66,9 @@ When is it suitable to use **to automatically send deployment messages to Lark o
6466

6567
## Implementation Principle
6668

67-
- **Web application version real-time detection:** **version-rocket** compares the version of the user's current browser with the version files in the remote server. We use JavaScript's `Web Worker API` to make monitoring rotation, which will not affect the browser rendering process.
69+
- **Web application version real-time detection:**
70+
1. Through version number management: **version-rocket** compares the version in the user's current browser with the version file on the remote server. We use the `Web Worker API` based on JavaScript to perform monitoring polling, which does not affect the browser rendering process.
71+
2. By detecting updates in specified file contents: **version-rocket** uses the browser's conditional cache mechanism to determine whether the specified file content has changed. We use the `Web Worker API` based on JavaScript to perform monitoring polling, which does not affect the browser rendering process. `v1.7.0`
6872

6973
- **Automatically send deployment messages to Lark or WeCom group chat:** **version-rocket** call the webhook method provided by collaborative office software to trigger group chat robots send messages.
7074

@@ -75,10 +79,10 @@ When is it suitable to use **to automatically send deployment messages to Lark o
7579
```bash
7680
# Choose a package manager you prefer
7781

78-
// npm
82+
# npm
7983
npm install version-rocket --save
8084

81-
// yarn
85+
# yarn
8286
yarn add version-rocket
8387

8488
# pnpm
@@ -88,7 +92,7 @@ pnpm install version-rocket
8892

8993
### Quick Start
9094

91-
### Web application version real-time detection
95+
### Web application version real-time detection: Through version number management
9296

9397
Step 1: Import `checkVersion()`, and use it
9498

@@ -211,14 +215,40 @@ server {
211215
```
212216
</details>
213217
214-
*Complete the above two steps, the version monitoring function can be used normally 🎉🎉*
218+
*Complete the above two steps, the version monitoring function (through version number management) can be used normally 🎉🎉*
219+
220+
### Web application version real-time detection: By detecting updates in specified file contents `v1.7.0`
221+
222+
> ⚠️ Friendly reminder: This method does not support displaying "current version changes or other information that needs to be shown in the prompt window". If you have such a requirement, please use the "version management" method.
223+
224+
import `checkVersion()`, and use it
225+
226+
```javascript
227+
// Entry file: such as App.vue or App.jsx, etc
228+
import { checkVersion } from 'version-rocket'
229+
230+
// Call checkVersion in the lifecycle hook
231+
checkVersion({
232+
// The list of files to be monitored usually includes the index.html file under a certain domain
233+
checkOriginSpecifiedFilesUrl: [`${location.origin}/index.html`],
234+
// The validation mode for the list of monitored files: 'one' (default) or 'all'
235+
checkOriginSpecifiedFilesUrlMode: 'one',
236+
// Whether to enable version monitoring (default true)
237+
enable: process.env.NODE_ENV !== 'development'
238+
})
239+
240+
// If you need to terminate version checking, call the unCheckVersion method in the destroy lifecycle. For more details, see the API documentation
241+
unCheckVersion({closeDialog: false})
242+
243+
```
244+
245+
*After completing the above steps, the version monitoring feature (by detecting updates in specified file contents) can be used normally 🎉🎉*
215246
216247
#### Personalize the theme
217248
218249
```javascript
219250

220251
// Entry file: such as App.vue or App.jsx, etc
221-
222252
import { checkVersion } from 'version-rocket'
223253
// It is recommended to use the version field in package.json, or you can customize versions
224254
import { version } from '../package.json'
@@ -592,6 +622,10 @@ sh "export messageJSON='{\"title\": \"This is a title\"}'"
592622
| config.localPackageVersion | string | The version of the current application usually takes the version field of package.json for comparison with the version.json file of the remote server | | Yes |
593623
| config.pollingTime | number | Time interval for polling monitoring, in ms | 5000 | No |
594624
| config.immediate | boolean | On the first visit, version monitoring will be triggered immediately, and then polling will be conducted at a customized time interval **`v1.5.0`** | false | No |
625+
| config.checkOriginSpecifiedFilesUrl | array | Setting this property will use 'detecting updates in specified file contents' instead of 'version number management' to monitor versions. Pass in the list of file addresses to be monitored, usually the index.html file under a certain domain **`v1.7.0`** | | false |
626+
| config.checkOriginSpecifiedFilesUrlMode | 'one' / 'all' | 'one' means that if the content of any file address in the list changes, a prompt for an update will be displayed; 'all' means that a prompt for an update will only be displayed when the content of all file addresses in the list changes. (This only takes effect when checkOriginSpecifiedFilesUrl is configured) **`v1.7.0`** | 'one' | false |
627+
| config.enable | boolean | Whether to enable version monitoring. This configuration item can be used to enable version monitoring only in specified environments **`v1.7.0`** | true ||
628+
| config.clearIntervalOnDialog | boolean | When the prompt dialog for a new version appears, clear the timer **`v1.7.0`** | false ||
595629
| config.onVersionUpdate | function(data) | Callback function for custom version hint UI (if you want to customize the popup UI, you can get the return value through the callback function to control the appearance of the popup) | | No |
596630
| config.onRefresh | function(data) | Confirm update: the callback function of the custom refresh event, where data is the latest version **`v1.5.0`** | | No |
597631
| config.onCancel | function(data) | Cancel update: the callback function of the custom cancel event, where data is the latest version **`v1.5.0`** | | No |

README.zh-CN.md

Lines changed: 44 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,9 @@
5454
## 功能特点
5555

5656
- 支持所有现代浏览器
57-
- 可用**版本实时监测**, 支持任意版本格式, 例如: 1.1.0、1.1.1.0、1.1.0-beta 等等
57+
- **可用版本实时检测**提供两种方式: 1. 通过**管理版本号**; 2. 通过检测**指定文件内容是否有更新**
58+
1. 通过管理版本号: 支持任意版本格式, 例如: 1.1.0、1.1.1.0、1.1.0-beta 等等
59+
2. 通过检测指定文件内容是否有更新: 支持任意远程服务器中的文件 `v1.7.0`
5860
- 支持**个性化设置**版本提示弹窗的文案和**主题**, 也支持自定义 UI
5961
- 部署成功后,将**部署消息同步给群聊机器人**, 目前支持飞书 (Lark) 和企业微信 (WeCom)
6062
- 部署信息卡片的文案和消息模版支持自定义, 并支持动态生成的字段传入
@@ -63,7 +65,9 @@
6365

6466
## 实现原理
6567

66-
- **Web 应用版本实时检测:** **version-rocket** 将用户当前浏览器中的版本与远程服务器中的版本文件进行比较。我们使用基于 javascript 的 `Web Worker API` 来做监测轮询,不会影响浏览器渲染进程。
68+
- **Web 应用版本实时检测:**
69+
1. 通过管理版本号: **version-rocket** 将用户当前浏览器中的版本与远程服务器中的版本文件进行比较。我们使用基于 javascript 的 `Web Worker API` 来做监测轮询,不会影响浏览器渲染进程。
70+
2. 通过检测指定文件内容是否有更新: **version-rocket** 将依赖浏览器的协商缓存原理来判断指定的文件内容是否发生了改变。我们使用基于 javascript 的 `Web Worker API` 来做监测轮询,不会影响浏览器渲染进程。`v1.7.0`
6771

6872
- **自动发送部署消息到飞书 (Lark) 或企业微信 (WeCom) 群聊:** **version-rocket** 调用协同办公软件提供的 WebHook 方式, 触发群聊机器人发送消息。
6973

@@ -74,10 +78,10 @@
7478
```bash
7579
# 选择一个你喜欢的包管理器
7680

77-
// npm
81+
# npm
7882
npm install version-rocket --save
7983

80-
// yarn
84+
# yarn
8185
yarn add version-rocket
8286

8387
# pnpm
@@ -87,7 +91,7 @@ pnpm install version-rocket
8791

8892
### 快速开始
8993

90-
### Web 应用版本实时检测
94+
### Web 应用版本实时检测: 通过管理版本号
9195

9296
第一步: 导入 `checkVersion()`, 并调用
9397

@@ -207,7 +211,34 @@ server {
207211
```
208212
</details>
209213
210-
*完成以上两个步骤, 版本监测功能已经就正常使用了 🎉🎉*
214+
*完成以上两个步骤, 版本监测功能(通过管理版本号)可以正常使用了 🎉🎉*
215+
216+
### Web 应用版本实时检测: 通过检测指定文件内容是否有更新 `v1.7.0`
217+
218+
> ⚠️ 温馨提示: 该方式不支持 "当前版本的修改内容或其他需要展示在提示弹窗上"的内容 (如有这样的需求, 请使用 “管理版本号” 的方式)
219+
220+
导入 `checkVersion()`, 并调用
221+
222+
```javascript
223+
// 入口文件: 如 App.vue 或 App.jsx 等
224+
import { checkVersion } from 'version-rocket'
225+
226+
// 在生命周期钩子中调用 checkVersion
227+
checkVersion({
228+
// 要监听的文件列表, 一般监测某个域名下的 index.html 文件
229+
checkOriginSpecifiedFilesUrl: [`${location.origin}/index.html`],
230+
// 监听的文件列表的校验模式: 'one'(默认) | 'all'
231+
checkOriginSpecifiedFilesUrlMode: 'one',
232+
// 是否启用版本监测 (默认 true)
233+
enable: process.env.NODE_ENV !== 'development'
234+
})
235+
236+
// 如需终止版本检测时, 在销毁生命周期中, 调用 unCheckVersion 方法进行终止, 详情参见 API
237+
unCheckVersion({closeDialog: false})
238+
239+
```
240+
241+
*完成以上步骤, 版本监测功能(通过检测指定文件内容是否有更新)可以正常使用了 🎉🎉*
211242
212243
#### 个性化设置主题
213244
@@ -579,10 +610,14 @@ sh "export messageJSON='{\"title\": \"This is a title\"}'"
579610
| 参数 | 类型 | 描述 | 默认值 | 必需 |
580611
| --- | --- | --- | --- | --- |
581612
| config | object | 版本监测配置项 | ||
582-
| config.originVersionFileUrl | string | 远程服务器上的 version.json 文件路径 | | |
583-
| config.localPackageVersion | string | 当前应用版本号, 通常取 package.json 的 version 字段, 用于与远程服务器的 version.json 文件比较 | | |
613+
| config.originVersionFileUrl | string | 远程服务器上的 version.json 文件路径 | | **`v1.7.0`** |
614+
| config.localPackageVersion | string | 当前应用版本号, 通常取 package.json 的 version 字段, 用于与远程服务器的 version.json 文件比较 | | **`v1.7.0`** |
584615
| config.pollingTime | number | 轮询监测的时间间隔, 单位 ms | 5000 ||
585616
| config.immediate | boolean | 第一次访问时, 立即触发版本监测, 之后按自定义时间间隔轮询 **`v1.5.0`** | false ||
617+
| config.checkOriginSpecifiedFilesUrl | array | 设置该属性后将使用 “通过检测指定文件是否有更新” 而不是 “通过管理版本号” 来监测版本, 传入希望监测的文件地址列表, 通常情况为某个域名下的 index.html 文件 **`v1.7.0`** | ||
618+
| config.checkOriginSpecifiedFilesUrlMode | 'one' / 'all' | 'one' 表示列表中文件地址只要有一个内容发生改变即提示更新; 'all' 表示列表中文件地址都发生改变时才提示更新. (当 checkOriginSpecifiedFilesUrl 配置后才生效) **`v1.7.0`** | 'one' ||
619+
| config.enable | boolean | 是否启用版本监测, 通过该配置项可以设置版本监测只在指定环境下开启 **`v1.7.0`** | true ||
620+
| config.clearIntervalOnDialog | boolean | 当发现新版本提示弹窗出现后, 清空定时器 **`v1.7.0`** | false ||
586621
| config.onVersionUpdate | function(data) | 自定义版本提示 UI 的回调函数 (如果你想自定义弹窗 UI, 通过回调函数可以拿到返回值来控制弹窗的显隐 ) | ||
587622
| config.onRefresh | function(data) | 确认更新: 自定义 refresh 事件的回调函数, data 为最新版本号 **`v1.5.0`** | ||
588623
| config.onCancel | function(data) | 取消更新: 自定义 cancel 事件的回调函数, data 为最新版本号 **`v1.5.0`** | ||
@@ -591,7 +626,7 @@ sh "export messageJSON='{\"title\": \"This is a title\"}'"
591626
| options.description | string | 弹窗的描述 | V xxx is available ||
592627
| options.buttonText | string | 弹窗按钮的文案 | Refresh ||
593628
| options.cancelButtonText | string | 关闭弹窗按钮的文案 (如果你希望弹窗允许被关闭, 请添加此选项) **`v1.5.0`** | ||
594-
| options.cancelMode | ignore-current-version (当前版本不再提示) / ignore-today (今天不再提示) / ignore-current-window (当前窗口不再提示) | 关闭弹窗的模式 (当 cancelButtonText 设置后生效) **`v1.5.0`** | ignore-current-version ||
629+
| options.cancelMode | ignore-current-version (当前版本不再提示, 通过管理版本号监测版本更新的默认配置, 该配置只支持管理版本号的方式) / ignore-today (今天不再提示) / ignore-current-window (当前窗口不再提示, 通过监测指定文件内容是否有更新方式的默认配置) | 关闭弹窗的模式 (当 cancelButtonText 设置后生效) **`v1.5.0`** | ignore-current-version ||
595630
| options.cancelUpdateAndStopWorker | boolean | 关闭弹窗时, 也关闭 worker (当 cancelButtonText 设置后生效) **`v1.5.0`** | false ||
596631
| options.imageUrl | string | 弹窗的提示图片 | ||
597632
| options.rocketColor | string | 弹窗提示图片中火箭的主题色, 设置后 options.imageUrl 无效 | ||

components/versionTipDialog.d.ts

Lines changed: 0 additions & 15 deletions
This file was deleted.

0 commit comments

Comments
 (0)