🔔 version-rocket 🚀
English | 简体ä¸æ–‡
Notify users when a new version of your site is available and prompt them to refresh the page.
When you finish deploying your app, send a deployment message to Lark Group Chat
About
version-rocket checks the version in the user's current browser against the version file in the remote server.
If a new version is available, a new version update prompt will be displayed to and the user will be given an operation button to refresh the page. Alternatively, version-rocket can notify you by receiving a callback function to support custom user interface.
We use the Web Worker API based on javascript to do the polling loop, will not affect the browser rendering process.
Features
- Compatible with all modern browsers
- The version prompt interface supports customization, and the content of the deployment message card can be customized.
- Available version real-time monitoring
- Synchronize deployment message to Lark group chat after successful deployment.
- Npm package support
Screenshots
- The first picture prompts user to refresh the page.
- The second picture shows that after the successful deployment of the project, the deployment message will be sent to the group chat to inform the team members.
- The third picture @All with optional settings based on second picture
Usage
Install
npm install version-rocket -S
Get Started
// 1. Import version-rocket, and invoke pollingCompareVersion method
import { pollingCompareVersion } from 'version-rocket'
import { version } from '../package.json'
/**
* @param 1: current version
* @param 2: remote server version.json file path
* @param 3: time interval of rotation monitoring (in ms), default 5000ms
* @param 4: custom version tip ui callback(optional)
*/
pollingCompareVersion(version, `${location.origin}/version.json`, 30000, (data) => {
console.log(data)
})
/**
* 2.
* generate-version-file shortcut command to create the version.json file.
* The parameter is the directory where you want to create version.json.
* If you don't pass the parameter, it will be created in the dist directory by default.
*/
{
"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 lark Robot is located, please continue.
/**
* 3.
* You need to create a send-lark-config.json file first, it store the field for setting the copy for the message card.
* Then, you can just execute the send-lark-message shortcut command. By default, the send-lark-config.json file in the current path is selected.
* If you want to customize the file path and file name, you can set the MESSAGE_PATH parameter to pass it in.
*/
{
"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 example
{
// card title
"title": "TEST FE Deployed Successfully",
// deploy project name
"projectName": "TEST",
// deploy branch name
"branch": "Staging",
// project url
"accessUrl": "https://test.com",
// remind group chat members: true/false
"isNotifyAll": true,
// lark robot webhook url
"larkWebHook": "https://open.larksuite.com/open-apis/bot/v2/hook/xxxxxxxxxxxx",
// deploy type
"deployTools": "Jenkins",
// the deploy time zone that you want to display, default "Asia/Shanghai"
"expectConvertToTimezone": "America/New_York"
}
Top comments (1)
Good Share