当前位置：网站首页>Elegantly detect and update web applications in real time

Elegantly detect and update web applications in real time

2022-08-08 14:47:00 【InfoQ】

一、背景
由于在 SPA 模式的 Web Changes to the content of a page in an application no longer cause a reload of the entire page, 所以需要解决 SPA Web 应用在使用的过程中, The problem of not being able to synchronize updates in time.并且很多情况下, Front-end engineers need to manage and maintain multiple at the same time SPA 项目, Most of them need to use version detection, So there is a package npm 包的想法, Do some optimizations and upgrades at the same time.
version-rocket 一个用于 web A library of tools to apply detection version updates.

二、应用场景
●经常会发生这样的情况:
 
When the user opens a certain  web App for a long time without refreshing the page, When the app has a new version update or bug fix, Users will not be able to know in time that a new version is released, Cause users to continue to use the old version, Affects user experience and backend data accuracy.
●This may be the case in teamwork:
 
You as a front-end engineer, During joint testing or deployment, After each deployment, you need to verbally communicate to team members that the deployment has been successful, 增加了沟通成本, 不够自动化, There is also no deployment record to follow.
使用 version-rocket Can help you solve the above problems.

三、功能简介
●版本更新: 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,Users can update the version by clicking the refresh button.另外,
version-rocket
 
Support personalized settings prompt pop-up text and theme, You can also pass in a callback function to customize the version update prompt.我们使用基于 javascript 的 
Web Worker API
 
to do monitoring polling,Does not affect the browser rendering process.
●The deployment is successful:
 
If you are on a team, 使用 Lark 或 Feishu comes for teamwork, 
version-rocket
 
Can help you push“部署成功”的消息到 Lark 群聊中 (通过 Lark 机器人).It is very quick and easy to use.

四、功能特点
● 支持所有现代浏览器
● Available versions are monitored in real time, Any version format is supported, 例如: 1.1.0、1.1.1.0、1.1.0-beta 等等
● Supports customizing the text and theme of the version prompt pop-up window, 也支持自定义 UI
● 部署成功后,Sync deployment messages to Lark 群聊
● The copy and message templates of deployment information cards support customization, And supports dynamically generated fields to be passed in
● 支持 TypeScript
● 支持 Npm 安装
（https://www.npmjs.com/package/version-rocket）

五、效果截图
● 第一张图: 当有新版本更新时, A pop-up window that reminds users to refresh the page in time (默认 UI).
● 第二张图: Personalize popup text and themes, When there are custom requirements for copywriting and themes, 非常好用.
● 第三张图: After the project is successfully deployed,Deployment information will be sent to the group chat,to notify team members, Card copy via one json 文件来配置, See below for how to use it.
● 第四张图: Customize message card copy, Can be set whether @全员, And supports dynamically generated fields to be passed in (如 version 在 ci/cd 后生成, 支持动态传入)


图一
图二
图三

图四

六、项目地址
欢迎一起讨论交流, 源码链接如下.
version-rocket
（https://github.com/guMcrey/version-rocket）

七、使用方法
安装
npm install version-rocket
开始使用
安装最新版, 使用 checkVersion 方法, 该方法兼容 pollingCompareVersion 功能, And supports custom pop-up text and themes (推荐)
使用默认主题
1.导入 checkVersion(), 并调用

import { checkVersion } from 'version-rocket'
// Recommended by default package.json 中的 version 字段, 若有自定义 version, please ignore this line
import { version } from '../package.json'

checkVersion({
 localPackageVersion: version,
 originVersionFileUrl: `${location.origin}/version.json`,
})
 
2.执行 generate-version-file 快捷命令,在项目中生成 version.json 文件, For deployment to remote servers
 (version.json 文件默认生成在 dist 目录下, If you need a custom directory, Directory parameters can be passed in, 参见以下示例)



{
 "name": "test",
 "description": "test",
 "private": true,
 "version": "0.0.1",
 "scripts": {
 ...
 "generate:version": "generate-version-file dist public"
 ...
 },
 ...
}
完成以上两个步骤, The version monitoring function has been used normally 
Personalize popup text and themes


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',
 }
)
Personalize the pop-up prompt picture


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',
 }
)
See more personalization settings“属性/参数”表
Support push notification of successful deployment to  Lark 群聊
1.在项目根目录下创建一个 send-lark-config.json 文件,It stores fields for setting the text of the message card display
2.执行 send-lark-message 快捷命令.默认情况下,in the current path send-lark-config.json file is selected

MESSAGE_PATH (可选): If you want to customize the file path or file name,可以设置 MESSAGE_PATH 参数,将其传入 (When this parameter is required to differentiate the deployment environment, 非常有用)
PACKAGE_JSON_PATH (可选): 如果你需要自定义 package.json 文件路径, 可以设置 PACKAGE_JSON_PATH 参数来自定义 (此参数对于 monorepo when the project is deployed, 可能有用.不传此参数, By default, the root path is obtained package.json 文件)



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


{
 // 消息卡片标题
 "title": "TEST FE Deployed Successfully",
 // Project name label
 "projectNameLabel": "Project name label",
 // 项目名称
 "projectName": "TEST",
 // Project branch label
 "branchLabel": "Branch label",
 // 项目分支, Can be used to differentiate deployment environments
 "branch": "Staging",
 // 版本标签
 "versionLabel": "Version label",
 // 版本
 "version": "1.1.1.0",
 // Items have access to address labels
 "accessUrlLabel": "Access URL label",
 // Project accessible address
 "accessUrl": "https://test.com",
 // 是否@Everyone label
 "isNotifyAllLabel": "Is notify all label",
 // 是否@所有人: true / false
 "isNotifyAll": true,
 // Lark 机器人的 webhook 链接
 "larkWebHook": "https://open.larksuite.com/open-apis/bot/v2/hook/xxxxxxxxxxxx",
 // 可选: Deployment tool description
 "deployToolsText": "Deploy tools text",
 // 可选: The method or platform used for deployment
 "deployTools": "Jenkins",
 // 可选: The time zone to which the deployment time wants to be converted,默认 "Asia/Shanghai" (When your project is deployed to a target server that is different from your time zone, This field can be set to convert time zones)
 "expectConvertToTimezone": "America/New_York"
 // 可选: Want to show more information than templates
 "remark": "Trigger by bob, fix xxx bug"
}
Supports passing in dynamically generated card copy
When your card copy is dynamically generated based on conditions, 可以传入 MESSAGE_JSON 字段来定义, 注意: MESSAGE_JSON The value needs to be escaped
MESSAGE_JSON (可选): If your card copy will be generated based on conditions, 可以传入 MESSAGE_JSON fields to customize (This parameter applies to dynamically generated card copy, 非常有用, 如 version, title 等)

 {
 "name": "test",
 "description": "test",
 "private": true,
 "version": "0.0.1",
 "scripts": {
 ...
 "send-lark-message:test": "MESSAGE_JSON='{\"title\":\"This is a dynamically generated title\",\"version\":\"1.1.0-beta\",\"accessUrl\":\"http://test.example.com\",\"isNotifyAll\":true}' send-lark-message"
 ...
 },
 ...
 }
Personalize deployment message cards


// send-lark-config.json 示例

{
 // Message card content
 "message": {
 "msg_type": "text",
 "content": {
 "text": "New message reminder"
 }
 },
 // Lark 机器人的 webhook 链接
 "larkWebHook": "https://open.larksuite.com/open-apis/bot/v2/hook/xxxxxxxxxxxx"
}
八、属性/参数
checkVersion(config, options) 函数参数列表
config 字段:
● originVersionFileUrl: 远程服务器上的 version.json 文件路径 (必须)
● localPackageVersion: 当前应用版本号, 通常取 package.json 的 version 字段, For use with remote servers version.json 文件比较 (必须)
● pollingTime: The time interval for polling monitoring, 默认值 5000, 单位 ms  (可选)
● onVersionUpdate: Custom version hints UI 的回调函数 (If you want to customize the popup UI, Through the callback function, you can get the return value to control the display and hide of the pop-up window ) (可选)
options 字段:
● title 弹窗的标题
● description Description of the popup
● buttonText The text for the popup button
● imageUrl The prompt image of the pop-up window
● rocketColorThe theme color of the rocket in the popup prompt picture, 设置后 options.imageUrl 无效
● primaryColor The theme color of the popup, It will affect the background color of the prompt picture and the button background, 设置后 imageUrl 无效
● buttonStyle popup button css 配置, The default button style can be overridden


九、相关链接
version-rocket 源码
https://github.com/guMcrey/version-rocket
Lark 自定义机器人指南
https://open.larksuite.com/document/uAjLw4CM/ukTMukTMukTM/bot-v3/use-custom-bots-in-a-group
Time zone reference table
https://jp.cybozu.help/general/zh/admin/list_systemadmin/list_localization/timezone.html

关于领创集团（Advance Intelligence Group）
领创集团成立于 2016 年,致力于通过科技创新的本地化应用,改造和重塑金融和零售行业,以多元化的业务布局打造一个服务于消费者、企业和商户的生态圈.集团旗下包含企业业务和消费者业务两大板块,企业业务包含 ADVANCE.AI 和 Ginee,分别为银行、金融、金融科技、零售和电商行业客户提供基于 AI 技术的数字身份验证、风险管理产品和全渠道电商服务解决方案;消费者业务 Atome Financial 包括亚洲领先的先享后付平台 Atome 和数字金融服务.
2021 年 9 月,领创集团宣布完成超 4 亿美元 D 轮融资,融资完成后领创集团估值已超 20 亿美元,成为新加坡最大的独立科技创业公司之一.

往期回顾 BREAK AWAY
Spring data JPA 实践和原理浅析
如何解决海量数据更新场景下的 Mysql 死锁问题
企业级 APIs 安全实践指南 （建议初中级工程师收藏）
Cypress UI 自动化测试框架
serverless让我们的运维更轻松





原网站

版权声明
本文为[InfoQ]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/220/202208081426152282.html

边栏推荐

猜你喜欢

随机推荐