Web application real-time version detection, which is the most convenient

🔔 version-rocket 🚀, a small tool for detecting version updates for web applications.

🔔 version-rocket 🚀

Simplified Chinese | English

A small tool for detecting version updates for web applications.

It often happens that when a user opens a web application in a browser for a long time without refreshing the page, when a new version of the application is updated or a problem is fixed, the user will not be able to know that a new version is released in time, causing the user to continue to use the old version version, which affects user experience and backend data accuracy.

In teamwork, there may be situations like this : as a front-end engineer, you need to verbally communicate with team members that the deployment has been successful after each deployment during joint debugging and testing or deployment, which increases communication costs, is not automated enough, and has no Deployment records to follow.

Using version-rocket can help you solve the above problems.

Introduction

version-rocket compares the version in the user's current browser with the version file in the remote server.

If a new version is released, a new version update prompt popup will be displayed on the page, and users can click the refresh button to update the version. In addition, version-rocket can also pass a callback function to customize the version update prompt interface.

We use the javascript-based Web Worker API for monitoring polling without affecting the browser rendering process.

---

In addition, if you are in a team that uses Lark or Feishu for team collaboration, version-rocket can help you push a "deployment successful" message to the Lark group chat (via Lark bot). It is very quick and easy to use, see below for how to use it.

If you have push requirements for other platforms, you can file an issue

If you find it useful, welcome to order 🌟, https://github.com/guMcrey/version-rocket

Features

• Supports all modern browsers
• Real-time monitoring of available versions
• After the deployment is successful, synchronize the deployment message to the Lark group chat
• The version prompt interface supports customization, and the content of the deployment information card can also be customized
• Support Npm installation

Effect screenshot

• The first picture: When there is a new version update, the function pop-up window that reminds the user to refresh the page in time.
• Second picture: After the project is successfully deployed, the deployment information will be sent to the group chat to notify team members, the card copy is configured through a json file, see below.
• The third picture: Based on the optional settings of the second picture, you can configure whether to @all staff, and everyone will receive a prompt after setting.

Instructions

Npm install version-rocket package

 npm install version-rocket -S

start using

 // 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"
    ...
  },
  ...
}

If you want to push the successful deployment message to the group chat where the Lark bot is located, please continue👇

 /**
 * 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"
}

Link

• Time zone reference table