🔔 버전-로켓 🚀

영어 | 简体中文

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

에 대한

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

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

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

특징

모든 최신 브라우저 지원

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

개인화된 버전 팝업 텍스트 및 테마 지원, 사용자 정의 UI도 지원

성공적인 배포 후 Lark 그룹 채팅에 배포 메시지 동기화

배포 메시지용 카드 텍스트 및 템플릿이 사용자 정의를 지원함

TypeScript 지원

Npm package support

스크린샷

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

두 번째 그림은 팝업 텍스트와 테마를 개인화하므로 텍스트와 테마를 사용자 정의해야 할 때 유용합니다.

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

네 번째 사진 @세 번째 사진

을 기준으로 옵션 설정이 있는 모든 사진

용법

설치

시작하다

최신 버전을 설치하고 사용하십시오.

 function, this function compatible with

 ```pollingCompareVersion```

, and support customize popup text and theme (Recommended)
<br/>

#### Use the default theme



```javascript

// 1. Step one: import checkVersion(), and use
import { checkVersion } from 'version-rocket'
import { version } from '../package.json'

checkVersion({
  localPackageVersion: version,
  originVersionFileUrl: `${location.origin}/version.json`,
})

/**
 * 2. Step two:
 * 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"
    ...
  },
  ...
}

위의 두 단계를 완료하면 버전 모니터링 기능을 정상적으로 사용할 수 있습니다 🎉🎉

팝업 텍스트 및 테마 개인화

import { checkVersion } from 'version-rocket'
import {version} from '../package.json'

checkVersion(
  {
    localPackageVersion: version,
    originVersionFileUrl: `${location.origin}/version.json`,
  },
  {
    title: 'Title',
    description: 'Description',
    primaryColor: '#758bfd',
    rocketColor: '#ff8600',
    buttonText: 'Button Text',
  }
)

팝업 이미지 개인화

import { checkVersion } from 'version-rocket'
import {version} from '../package.json'

checkVersion(
  {
    localPackageVersion: version,
    originVersionFileUrl: `${location.origin}/version.json`,
  },
  {
    imageUrl: 'https://avatars.githubusercontent.com/u/26329117',
  }
)

버전 1.0.9 이상을 사용하는 경우 pollingCompareVersion 메서드를 호출합니다.

최신 버전으로 업그레이드하여 팝업 문구 및 테마 커스터마이징 기능을 경험해 보시기를 권장합니다.

// 1. Step one: import pollingCompareVersion, and use
import { pollingCompareVersion } from 'version-rocket'
import { version } from '../package.json'

pollingCompareVersion(version, `${location.origin}/version.json`, 30000, (data) => {
    console.log(data)
})

// 2. Step two: see above: "Use the default theme"

See "Attributes/Parameters" table for more personalized settings📄

Lark 그룹 채팅에 성공적으로 배포되었다는 푸시 알림 지원

/**
 * 1. Step one:
 * You need to create a send-lark-config.json file first, it store the field for setting the text 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.
 * 
 * MESSAGE_PATH (optional): If you want to customize the file path and file name, you can set the MESSAGE_PATH parameter to pass it in.
 * 
 * PACKAGE_JSON_PATH (optional): If you want to customize the path to the package.json file, you can do so by passing in the PACKAGE_JSON_PATH environment variable. We will get the package.json file from the root path by default.
*/

{
  "name": "test",
  "description": "test",
  "private": true,
  "version": "0.0.1",
  "scripts": {
    ...
    "send-lark-message:test": "MESSAGE_PATH=./lark-message-config.json PACKAGE_JSON_PATH=./packages/test/package.json send-lark-message"
    ...
  },
  ...
}

// Step two: 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"
}

배포 메시지 템플릿 개인화

// send-lark-config.json example
{
    // message card template content
    "message": {
        "msg_type": "text",
        "content": {
            "text": "New message reminder"
        }
    },
    // webhook link for the Lark bot
    "larkWebHook": "https://open.larksuite.com/open-apis/bot/v2/hook/xxxxxxxxxxxx"
}

속성/매개변수

 function parameter table

| Params | Type | Description | Default | Required |
| --- | --- | --- | --- | --- |
| config | object | Version monitoring configuration item |  | Yes |
| config.originVersionFileUrl | string |  The path to the version.json file on the remote server | | Yes |
| 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 |
| config.pollingTime | number | Time interval for polling monitoring, in ms | 5000 | No |
| 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 |
| options | object | Configuration items for popup text and themes (not customize the popup UI, but use it if you need to modify the text and themes) | | No |
| options.title | string | Popup title | Update | No |
| options.description | string | Popup description | V xxx is available | No |
| options.buttonText | string | Popup button text | Refresh | No |
| options.imageUrl | string | Popup image |  | No |
| options.rocketColor | string | The popup picture's theme color of the rocket, after setting Options.imageUrl is invalid | | No |
| options.primaryColor | string | The theme color of the popup, it will affect the hint image background color and button background color, after setting imageUrl is invalid | | No |
| options.buttonStyle | string | The CSS configuration of pop-up buttons can override the default button style | | No |

####

 ```pollingCompareVersion```

 function parameter table

| Params | Type | Description | Default | Required |
| --- | --- | --- | --- | --- |
| 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 |
| originVersionFileUrl | string | The path to the version.json file on the remote server | | Yes |
| pollingTime | number | Time interval for polling monitoring, in ms | | Yes |
| 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 |


## Link
- [Timezone List](https://jp.cybozu.help/general/zh/admin/list_systemadmin/list_localization/timezone.html)