- 🔔 version-rocket 🚀
- О
- Особенности
- Скриншоты
- Использование
- Установите
- Начать
- Персонализация текста и темы всплывающего окна
- Персонализация изображения всплывающего окна
- Если вы используете версию 1.0.9 и более позднюю, вызовите метод pollingCompareVersion.
- Поддержка push-уведомления об успешном развертывании в групповом чате Lark
- Персонализация шаблона сообщения о развертывании
- Атрибуты/параметры
🔔 version-rocket 🚀
Английский | 简体中文
Уведомляйте пользователей о появлении новой версии вашего сайта и предлагайте им обновить страницу.
Когда вы закончите развертывание приложения, отправьте сообщение о развертывании в Lark Group Chat.
О
version-rocket сверяет версию в текущем браузере пользователя с файлом версии на удаленном сервере.
Если доступна новая версия, будет отображен запрос на обновление версии, а пользователю будет предоставлена кнопка для обновления страницы. В качестве альтернативы, version-rocket может уведомить вас, получив функцию обратного вызова для поддержки пользовательского интерфейса.
Мы используем Web Worker API на основе javascript для выполнения цикла опроса, что не повлияет на процесс рендеринга браузера.
Особенности
- Поддержка всех современных браузеров
- Доступен мониторинг версии в реальном времени
- Поддержка персонализированного текста и темы всплывающего окна версии, а также поддержка пользовательского пользовательского интерфейса
- Синхронизация сообщения о развертывании в групповом чате Lark после успешного развертывания
- Текст карточки и шаблоны для сообщений о развертывании поддерживают настройку
- Поддержка TypeScript
- Поддержка пакетов Npm
Скриншоты
- Первая картинка предлагает пользователю обновить страницу.
- Вторая картинка персонализирует текст и тему всплывающего окна, отлично подходит для случаев, когда вам нужно настроить текст и тему.
- Третья картинка показывает, что после успешного развертывания проекта сообщение о развертывании будет отправлено в групповой чат для информирования членов команды.
- Четвертый рисунок @Все с дополнительными настройками, основанными на третьем рисунке
Использование
Установите
Начать
Установите последнюю версию, используйте
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"
Смотрите таблицу «Атрибуты/Параметры» для более персонализированных настроек📄.
Поддержка push-уведомления об успешном развертывании в групповом чате 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)