version-rocket ，一个用于 web 利用检测版本更新的小工具。

version-rocket

简体中文 | English

一个用于 web 利用检测版本更新的小工具。

常常会产生这样的状况: 当用户在浏览器中关上某 web 利用较长时间且未刷新页面, 在利用有新版本更新或问题修复时, 用户会无奈及时通晓有新版公布, 导致用户持续应用旧的版本, 影响用户体验和后端数据准确性。

在团队单干中可能会有这样的状况: 你作为前端工程师, 在联调测试或部署上线时, 每次部署后都须要跟团队成员口头传播曾经部署胜利, 减少了沟通老本, 不够自动化, 也没有部署记录以有迹可循。

应用 version-rocket 能够帮你解决以上困扰。

简介

version-rocket 将用户以后浏览器中的版本与近程服务器中的版本文件进行比拟。

如果有新的版本公布，将在页面中展现一个新版本更新提醒弹窗，用户能够通过点击刷新按钮来更新版本。另外，version-rocket 也可传入一个回调函数来自定义版本更新提醒界面。

咱们应用基于javascript的 Web Worker API 来做监测轮询，不会影响浏览器渲染过程。

另外, 如果你所在的团队, 应用 Lark 或 飞书来团队合作, version-rocket 能够帮你推送“部署胜利”的音讯到 Lark 群聊中 (通过 Lark 机器人)。 应用办法十分快捷简略, 应用办法见下文。

如果有其余平台的推送需要, 能够提 issue

感觉有用，欢送来点个 ，https://github.com/guMcrey/version-rocket

性能特点

  • 反对所有古代浏览器
  • 可用版本实时监测
  • 部署胜利后，将部署音讯同步到 Lark 群聊
  • 版本提醒界面反对自定义，部署信息卡片的内容也能够自定义
  • 反对 Npm 装置

成果截图

  • 第一张图: 当有新版本更新时, 及时揭示用户刷新页面的性能弹窗。
  • 第二张图: 在我的项目胜利部署后，部署信息将被发送到群聊，以告诉团队成员, 卡片文案通过一个 json 文件来配置, 请参见下文。
  • 第三张图: 基于第二张图片的可选设置, 能够配置是否要@全员, 设置后所有人会收到提醒。



应用办法

Npm 装置 version-rocket 包

npm install version-rocket -S

开始应用

// 1. 导入 version-rocket 包的 pollingCompareVersion 办法, 并调用import { pollingCompareVersion } from 'version-rocket'import { version } from '../package.json'/** * @参数 1: 以后利用版本号, 通常取 package.json 的 version 字段 * @参数 2: 近程服务器上的 version.json 文件门路 * @参数 3: 轮询监测的工夫距离(毫秒)，默认为 5000 毫秒 (比拟以后利用版本号和近程服务器中 version.json 中的版本号是否雷同, 不同时展现版本更新弹窗。) * @参数 4: 自定义版本提醒 UI 的回调函数 (如果你想自定义提醒 UI, 通过回调函数能够拿到返回值来管制提醒的显隐, 此参数可选) */pollingCompareVersion(version, `${location.origin}/version.json`, 30000, (data) => {    console.log(data)})
/** * 2. * 执行 generate-version-file 快捷命令，即可创立 version.json 文件 * version.json 文件默认生成在 dist 目录下, 如果须要自定义目录, 可传入目录参数, 参见以下示例:*/ {  "name": "test",  "description": "test",  "private": true,  "version": "0.0.1",  "scripts": {    ...    "generate:version": "generate-version-file dist public"    ...  },  ...}
如果你想把胜利部署的音讯推送到 Lark 机器人所在的群聊，请持续
/** * 3. * 你须要在我的项目根目录下创立一个 send-lark-config.json 文件，它存储了用于设置音讯卡展现文案的字段 * 而后, 执行 send-lark-message 快捷命令。默认状况下，以后门路中的 send-lark-config.json 文件被选中 * 如果你想自定义文件门路或文件名，你能够设置 MESSAGE_PATH 参数，将其传入, 设置办法如下:*/{  "name": "test",  "description": "test",  "private": true,  "version": "0.0.1",  "scripts": {    ...    "send-lark-message:test": "MESSAGE_PATH=./lark-message-config.json send-lark-message"    ...  },  ...}// send-lark-config.json 文件及字段{    // 音讯卡片题目    "title": "TEST FE Deployed Successfully",    // 项目名称    "projectName": "TEST",    // 我的项目分支, 可用于区别部署环境    "branch": "Staging",    // 我的项目可拜访地址    "accessUrl": "https://test.com",    // 是否@所有人: true / false    "isNotifyAll": true,    // Lark 机器人的 webhook 链接    "larkWebHook": "https://open.larksuite.com/open-apis/bot/v2/hook/xxxxxxxxxxxx",    // 部署所应用的形式或平台    "deployTools": "Jenkins",    // 可选: 部署工夫想要转换的时区，默认 "Asia/Shanghai" (当你的我的项目要部署的指标服务器与你所在时区不同, 能够此字段转换时区)    "expectConvertToTimezone": "America/New_York"}

链接

  • 时区参照表