🔔 버전-로켓 🚀

영어 | 简体中文

사이트의 새 버전을 사용할 수 있을 때 사용자에게 알리고 페이지를 새로 고치라는 메시지를 표시합니다.
앱 배포를 완료하면 Lark 그룹 채팅에 배포 메시지를 보냅니다.

에 대한

version-rocket은 원격 서버의 버전 파일에 대해 사용자의 현재 브라우저에 있는 버전을 확인합니다.

새 버전을 사용할 수 있는 경우 새 버전 업데이트 프롬프트가 표시되고 사용자에게 페이지를 새로 고칠 수 있는 작업 버튼이 제공됩니다. 또는 version-rocket이 사용자 지정 사용자 인터페이스를 지원하는 콜백 함수를 수신하여 알려줄 수 있습니다.

우리는 폴링 루프를 수행하기 위해 javascript 기반의 Web Worker API를 사용하며 브라우저 렌더링 프로세스에 영향을 미치지 않습니다.

특징

모든 최신 브라우저와 호환됨

버전 프롬프트 인터페이스는 사용자 정의를 지원하며 배포 메시지 카드의 내용을 사용자 정의할 수 있습니다.

사용 가능한 버전 실시간 모니터링

성공적인 배포 후 배포 메시지를 Lark 그룹 채팅에 동기화합니다.

Npm package support

스크린샷

첫 번째 그림은 사용자에게 페이지를 새로 고치라는 메시지를 표시합니다.

두 번째 사진은 프로젝트가 성공적으로 배포된 후 팀 구성원에게 알리기 위해 그룹 채팅에 배포 메시지가 전송되는 것을 보여줍니다.

세 번째 사진 @두 번째 사진

을 기준으로 선택적 설정이 있는 모든 사진

용법

설치

npm install version-rocket -S

시작하다

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

라크 로봇이 위치한 단체 채팅방에 배포 성공 메시지를 푸시하고 싶다면 계속 진행해주세요.

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

링크

Timezone List