version rocket
1.7.1
Inglês | 简体中文
Uma biblioteca de ferramentas para detecção de versão do aplicativo da web e notificação de implantação.
Catálogo
Version-Rocket contém dois módulos funcionais: versão do aplicativo da web Detecção em tempo real , mensagem de implantação automática para Lark ou Wecom Group Chat
Você pode usar um módulo separadamente de acordo com as necessidades ou usá -lo junto
Quando é adequado usar a versão do aplicativo da web detecção em tempo real ? -A cena: esse tipo de situação geralmente acontece. Quando o usuário abre um aplicativo da Web no navegador por um longo tempo e não atualiza a página. Quando o aplicativo tiver uma nova atualização da versão ou o reparo do problema, o usuário não saberá que existe uma nova versão da versão, que levará ao usuário. Continue usando versões antigas para afetar a experiência do usuário e a precisão dos dados de back-end.
Quando é adequado usar para enviar automaticamente mensagens de implantação para o Chat de Lark ou Wecom Group ? -A cena: pode haver tal situação na cooperação em equipe. Como engenheiro de front-end, você precisa se comunicar verbalmente com os membros da equipe após cada implantação. Não há registros de implantação a seguir.
Webhook . Depois que a implantação do aplicativo for bem -sucedida, por meio de robôs de bate -papo em grupo, as notícias da "implantação bem -sucedida" serão impulsionadas automaticamente para o bate -papo em grupo.Se você tiver as necessidades de pressão de outras plataformas, pode mencionar problemas
v1.7.0Versão da Web Application Detecção em tempo real:
Web Worker API com base no JavaScript para executar a pesquisa de monitoramento, que não afeta o processo de renderização do navegador.Web Worker API com base no JavaScript para executar a pesquisa de monitoramento, que não afeta o processo de renderização do navegador. v1.7.0Envie automaticamente mensagens de implantação para Lark ou Wecom Group Chat: Version-Rocket Ligue para o método Webhook fornecido pelo software colaborativo do Office para acionar os robôs de bate-papo em grupo.
# Choose a package manager you prefer
# npm
npm install version-rocket --save
# yarn
yarn add version-rocket
# pnpm
pnpm install version-rocket
Etapa 1: importar checkVersion() e use -o
// Entry file: such as App.vue or App.jsx, etc
import { checkVersion } from 'version-rocket'
// It is recommended to use the version field in package.json, or you can customize versions
import { version } from '../package.json'
checkVersion ( {
localPackageVersion : version ,
originVersionFileUrl : ` ${ location . origin } /version.json` ,
// Refer to API for more configuration options
} )
// To terminate version detection, call the unCheckVersion method during the destruction life cycle. For details, see the API
unCheckVersion ( { closeDialog : false } )
Etapa 2: Depois de executar o comando generate-version-file Custom, gerar o arquivo version.json , usado para implantar em um servidor remoto
VERSION (Opcional): Quando a versão personalizada é necessária, ela é passada. O valor padrão é o campo de versão package.json
Diretório de saída de arquivo (Opcional): Versão definida pelo usuário.json Output Directory , que é o diretório Dist por padrão
EXTERNAL (Opcional): Quando você deseja salvar mais informações em version.json , como o conteúdo modificado da versão atual ou outras coisas que precisam ser exibidas no pop-up (usado na interface do usuário personalizada do OnversionUpdate) v1.6.0
EXTERNAL_PATH (Opcional): Aceita um caminho de arquivo, recomendado quando muitas informações extras precisam ser gravadas no version.json . Quando EXTERNAL e EXTERNAL_PATH são definidos, a prioridade é menor que EXTERNAL （usado na interface do usuário personalizada OnversionUpdate） v1.6.1
Uso da versão
// package.json
{
"name" : "test" ,
"description" : "test" ,
"private" : true ,
"version" : "0.0.1" ,
"scripts" : {
...
// Mac or Linux system
"generate:version" : "VERSION=1.1.0-beta generate-version-file dist public"
// Windows system: install cross-env first
// npm install cross-env -D
"generate:version" : "cross-env VERSION=1.1.0-beta generate-version-file dist public"
. . .
} ,
...
} v1.6.0 externo e externo_path v1.6.1 Uso
Formato JSON, use esta ferramenta para escapar, clique aqui
// package.json
{
"name" : "test" ,
"description" : "test" ,
"private" : true ,
"version" : "0.0.1" ,
"scripts" : {
...
// Mac or Linux (simple text)
"generate:version" : "EXTERNAL='some text' generate-version-file dist public"
// Mac or Linux (JSON text)
"generate:version" : "EXTERNAL='{"update":"fix bugs","content":"some tips"}' generate-version-file dist public"
// Mac or Linux （JSON file, e.g. version-external.json）
"generate:version" : "EXTERNAL_PATH=version-external.json generate-version-file dist public"
// Windows (simple text)
"generate:version" : "set EXTERNAL=some text && generate-version-file dist public"
// Windows (JSON text)
"generate:version" : "set EXTERNAL={"update":"fix bugs","content":"some tips"} && generate-version-file dist public"
// Windows （JSON file, e.g. version-external.json）
"generate:version" : "set EXTERNAL_PATH=version-external.json && generate-version-file dist public"
. . .
} ,
...
} // version-external.json
{
"update" : [
"fix some bugs" ,
"improve home page" ,
"update docs"
] ,
"content" : "please update to latest version"
}// nginx example
server {
...
location / {
...
if ( $request_filename ~ * . * / version . (json)$) {
add_header Cache-Control " private, no-store, no-cache, must-revalidate, proxy-revalidate " ;
}
...
}
...
}Conclua as duas etapas acima, a função de monitoramento da versão (através do gerenciamento do número de versão) pode ser usada normalmente?
v1.7.0
️ Lembrete amigável: Este método não suporta exibir "alterações atuais da versão ou outras informações que precisam ser mostradas na janela prompt". Se você tiver esse requisito, use o método "Gerenciamento de versão".
importar checkVersion() e use -o
// Entry file: such as App.vue or App.jsx, etc
import { checkVersion } from 'version-rocket'
// Call checkVersion in the lifecycle hook
checkVersion ( {
// The list of files to be monitored usually includes the index.html file under a certain domain
checkOriginSpecifiedFilesUrl : [ ` ${ location . origin } /index.html` ] ,
// The validation mode for the list of monitored files: 'one' (default) or 'all'
checkOriginSpecifiedFilesUrlMode : 'one' ,
// Whether to enable version monitoring (default true)
enable : process . env . NODE_ENV !== 'development'
} )
// If you need to terminate version checking, call the unCheckVersion method in the destroy lifecycle. For more details, see the API documentation
unCheckVersion ( { closeDialog : false } )
Depois de concluir as etapas acima, o recurso de monitoramento da versão (detectando atualizações no conteúdo especificado do arquivo) pode ser usado normalmente?
// Entry file: such as App.vue or App.jsx, etc
import { checkVersion } from 'version-rocket'
// It is recommended to use the version field in package.json, or you can customize versions
import { version } from '../package.json'
checkVersion (
{
localPackageVersion : version ,
originVersionFileUrl : ` ${ location . origin } /version.json` ,
} ,
{
title : 'Title' ,
description : 'Description' ,
primaryColor : '#758bfd' ,
rocketColor : '#ff8600' ,
buttonText : 'Button Text' ,
}
)Ou definir uma imagem rápida
// Entry file: such as App.vue or App.jsx, etc
import { checkVersion } from 'version-rocket'
// It is recommended to use the version field in package.json, or you can customize versions
import { version } from '../package.json'
checkVersion (
{
localPackageVersion : version ,
originVersionFileUrl : ` ${ location . origin } /version.json` ,
} ,
{
imageUrl : 'https://avatars.githubusercontent.com/u/26329117' ,
}
) 
Etapa 1:
lark-message-config.json no diretório raiz do projeto para definir o texto do cartão de mensagemMESSAGE_PATH (Opcional): Passado se você precisar personalizar o caminho do arquivo ou o nome do arquivo (este parâmetro é útil se você precisar diferenciar o ambiente de implantação). Por padrão, o arquivo de cotovia-message-config.json no diretório raiz é usadoPACKAGE_JSON_PATH (opcional): Passado se você precisar personalizar o caminho para o arquivo package.json (esse parâmetro pode ser útil para implantações de projetos monorepo). O padrão é obter o arquivo package.json no caminho raiz // package.json
{
"name" : "test" ,
"description" : "test" ,
"private" : true ,
"version" : "0.0.1" ,
"scripts" : {
...
// Mac or Linux system
"send-lark-message:test" : "MESSAGE_PATH=./lark-message-staging-config.json PACKAGE_JSON_PATH=./packages/test/package.json send-lark-message"
// Windows system: install cross-env first
// npm install cross-env -D
"send-lark-message:test" : "cross-env MESSAGE_PATH=./lark-message-staging-config.json PACKAGE_JSON_PATH=./packages/test/package.json send-lark-message"
. . .
} ,
...
} Etapa 2: Definir lark-message-config.json
// lark-message-config.json
{
// optional: card header's background color, default is turquoise, v1.6.2
// available values: blue | wathet | turquoise | green | yellow | orange | red | carmine | violet | purple | indigo | grey
"headerBgColor" : "red" ,
// card title
"title" : "TEST FE Deployed Successfully" ,
// project name label
"projectNameLabel" : "Project name label" ,
// deploy project name
"projectName" : "TEST" ,
// project branch label
"branchLabel" : "Branch label" ,
// deploy branch name
"branch" : "Staging" ,
// version label
"versionLabel" : "Version label" ,
// version
"version" : "1.1.1.0" ,
// project access url label
"accessUrlLabel" : "Access URL label" ,
// project access url
"accessUrl" : "https://test.com" ,
// remind group chat members label
"isNotifyAllLabel" : "Is notify all label" ,
// 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 description
"deployToolsText" : "Deploy tools text" ,
// deploy type
"deployTools" : "Jenkins" ,
// the deploy time zone that you want to display, default "Asia/Shanghai"
"expectConvertToTimezone" : "America/New_York"
// more information want to show
"remark" : "Trigger by bob, fix xxx bug"
} Se a cópia do seu cartão for gerada de acordo com as condições, você poderá passar em MESSAGE_JSON Field é definido, como versão, título, etc.
Nota: MESSAGE_JSON precisa ser escapar
// package.json
{
"name" : "test" ,
"description" : "test" ,
"private" : true ,
"version" : "0.0.1" ,
"scripts" : {
...
// Mac or Linux system
"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"
// Windows system
"send-lark-message:test" : "set MESSAGE_JSON={"title":"This is a dynamically generated title","version":"1.1.0-beta","accessUrl":"http://test.example.com","isNotifyAll":true} && send-lark-message"
. . .
} ,
...
}Ou após variáveis de exportação, cita no package.json (não suporta Windows)
// ci file
sh "npm run build"
sh "export messageJSON='{"title": "This is a title"}'"
// package.json
{
"name" : "test" ,
"description" : "test" ,
"private" : true ,
"version" : "0.0.1" ,
"scripts" : {
...
"send-lark-message:test" : "MESSAGE_JSON=${messageJSON} send-lark-message"
. . .
} ,
...
} // lark-message-config.json
{
// Message card content
"message" : {
"msg_type" : "text" ,
"content" : {
"text" : "New message reminder"
}
} ,
// Lark robot's webhook link
"larkWebHook" : "https://open.larksuite.com/open-apis/bot/v2/hook/xxxxxxxxxxxx"
} 
Etapa 1:
message-config.json no diretório raiz do projeto para definir o texto do cartão de mensagemMESSAGE_PATH (Opcional): Passado quando você precisar personalizar o caminho do arquivo ou nome do arquivo (este parâmetro é útil se você precisar diferenciar o ambiente de implantação). O padrão é usar o arquivo message-config.json no diretório raizPACKAGE_JSON_PATH (Opcional): Passado quando um caminho personalizado para o arquivo package.json é necessário (este parâmetro pode ser útil para implantações de projetos Monorepo). O padrão é obter o arquivo package.json no caminho raiz // package.json
{
"name" : "test" ,
"description" : "test" ,
"private" : true ,
"version" : "0.0.1" ,
"scripts" : {
...
// Mac or Linux system
"send-wecom-message:test" : "MESSAGE_PATH=./message-config.json PACKAGE_JSON_PATH=./packages/test/package.json send-wecom-message"
// Windows system: install cross-env first
// npm install cross-env -D
"send-wecom-message:test" : "cross-env MESSAGE_PATH=./message-config.json PACKAGE_JSON_PATH=./packages/test/package.json send-wecom-message"
. . .
} ,
...
} Etapa 2: Defina message-config.json
{
// card title
"title" : "TEST FE Deployed Successfully" ,
// project name label
"projectNameLabel" : "Project name label" ,
// deploy project name
"projectName" : "TEST" ,
// project branch label
"branchLabel" : "Branch label" ,
// deploy branch name
"branch" : "Staging" ,
// version label
"versionLabel" : "Version label" ,
// version
"version" : "1.1.1.0" ,
// project access url label
"accessUrlLabel" : "Access URL label" ,
// project access url
"accessUrl" : "https://test.com" ,
// remind group chat members label
"isNotifyAllLabel" : "Is notify all label" ,
// remind group chat members: true/false
"isNotifyAll" : true ,
// WeCom robot webhook url
"webHook" : "https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=xxxxxxxxxxxxxxx" ,
// deploy type description
"deployToolsText" : "Deploy tools text" ,
// deploy type
"deployTools" : "Jenkins" ,
// the deploy time zone that you want to display, default "Asia/Shanghai"
"expectConvertToTimezone" : "America/New_York"
// more information want to show
"remark" : "Trigger by bob, fix xxx bug"
} Se a cópia do seu cartão for gerada de acordo com as condições, você poderá passar em MESSAGE_JSON Field é definido, como versão, título, etc.
Nota: MESSAGE_JSON precisa ser escapar
// package.json
{
"name" : "test" ,
"description" : "test" ,
"private" : true ,
"version" : "0.0.1" ,
"scripts" : {
...
// Mac or Linux system
"send-wecom-message:test" : "MESSAGE_JSON='{"title":"This is a dynamically generated title","version":"1.1.0-beta","accessUrl":"http://test.example.com","isNotifyAll":true}' send-wecom-message"
// Windows system
"send-wecom-message:test" : "set MESSAGE_JSON={"title":"This is a dynamically generated title","version":"1.1.0-beta","accessUrl":"http://test.example.com","isNotifyAll":true} && send-wecom-message"
. . .
} ,
...
}Ou após variáveis de exportação, cita no package.json (não suporta Windows)
// ci file
sh "npm run build"
sh "export messageJSON='{"title": "This is a title"}'"
// package.json
{
"name" : "test" ,
"description" : "test" ,
"private" : true ,
"version" : "0.0.1" ,
"scripts" : {
...
"send-wecom-message:test" : "MESSAGE_JSON=${messageJSON} send-wecom-message"
. . .
} ,
...
} // message-config.json
{
// message card template content
"message" : {
"msgtype" : "text" ,
"text" : {
"content" : "This is a custom message"
}
}
// webhook link for the WeCom bot
" webHook ": "https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=xxxxxxxxxxxx"
} 
Função de CheckVersion
Ativar detecção de versão em tempo real em tempo real
| Params | Tipo | Descrição | Padrão | Obrigatório |
|---|---|---|---|---|
| Config | objeto | Item de configuração de monitoramento de versão | Sim | |
| config.originversionfileurl | corda | O caminho para o arquivo versão.json no servidor remoto | Sim | |
| config.localpackageversion | corda | A versão do aplicativo atual geralmente leva o campo de versão do package.json para comparação com o arquivo versão.json do servidor remoto | Sim | |
| config.pollingTime | número | Intervalo de tempo para monitoramento de pesquisas, em MS | 5000 | Não |
| config.Imediate | booleano | Na primeira visita, o monitoramento da versão será acionado imediatamente e, em seguida, as pesquisas serão realizadas em um intervalo de tempo personalizado v1.5.0 | falso | Não |
| config.checkoriginspecifiedfilesurl | variedade | A configuração desta propriedade usará 'Detectar atualizações no conteúdo de arquivo especificado' em vez de 'gerenciamento de número de versão' para monitorar versões. Passe na lista de endereços de arquivo a serem monitorados, geralmente o arquivo index.html sob um determinado domínio (desduplicação automática) v1.7.0 | falso | |
| config.checkoriginspecifiedfilesurlmode | 'One' / 'All' | 'Um' significa que, se o conteúdo de qualquer endereço de arquivo na lista mudar, um prompt para uma atualização será exibido; 'All' significa que um prompt para uma atualização será exibido somente quando o conteúdo de todos os endereços de arquivo na lista mudar. (Isso só entra em vigor quando o checkoriginspecifiedfilesurl está configurado) v1.7.0 | 'um' | falso |
| config.enable | booleano | Se deve ativar o monitoramento da versão. Este item de configuração pode ser usado para ativar o monitoramento da versão apenas em ambientes especificados v1.7.0 | verdadeiro | 否 |
| config.clearinteralondialog | booleano | Quando a caixa de diálogo Prompt para uma nova versão aparecer, limpe o timer v1.7.0 | falso | 否 |
| config.onversionUpdate | função (dados) | Função de retorno de chamada para a versão personalizada DINT UI (se você deseja personalizar a interface do usuário pop -up, poderá obter o valor de retorno através da função de retorno de chamada para controlar a aparência do pop -up) | Não | |
| config.onRefresh | função (dados) | Confirmar atualização: a função de retorno de chamada do evento de atualização personalizado, onde os dados são a versão mais recente v1.5.0 | Não | |
| config.oncancel | função (dados) | Cancelar atualização: a função de retorno de chamada do evento de cancelamento personalizado, onde os dados são a versão mais recente v1.5.0 | Não | |
| opções | objeto | Itens de configuração para texto pop -up e temas (não personalize a interface do usuário pop -up, mas use -o se precisar modificar o texto e os temas) | Não | |
| options.title | corda | Título pop -up | Atualizar | Não |
| options.Description | corda | Descrição pop -up | V xxx está disponível | Não |
| options.ButtonText | corda | Texto do botão pop -up | Atualizar | Não |
| options.cancelbuttonText | corda | Texto para fechar o botão pop-up (adicione esta opção, se você deseja que o pop-up seja permissão para estar perto) v1.5.0 | Não | |
| options.CancelMode | Ignore-Current-Version / Ignore-Today / Ignore-Current-Window | Fechar o modo pop-up (entra em vigor quando o cancelbuttonText está definido) v1.5.0 | ignorar a versões-corrente | Não |
| options.cancelupdateAndStopWorker | booleano | Quando o pop -up é cancelado, o trabalhador também é interrompido (entra em vigor quando o cancelButtonText está definido) v1.5.0 | falso | 否 |
| options.Imageurl | corda | Imagem pop -up | Não | |
| options.rocketColor | corda | A cor tema da foto pop -up do foguete, depois de definir opções.Imageurl é inválido | Não | |
| options.PrimaryColor | corda | A cor do tema do pop -up, afetará a cor de fundo da imagem e a cor do botão, depois de definir o imageurl, é inválido | Não | |
| options.ButtonStyle | corda | A configuração CSS dos botões pop-up pode substituir o estilo de botão padrão | Não |
Função de desmarque
Rescindir o processo
workercriado após ligar paracheckVersion
| Params | Tipo | Descrição | Padrão | Obrigatório |
|---|---|---|---|---|
| FOLHOLOG | booleano | Se você deve fechar a versão de atualização da versão, janela pop-up | - | Sim |
| Closeworker | booleano | Se deve fechar o trabalhador | verdadeiro | Não |
npm run test Versão-Rocket é software de código aberto com a Apache License 2.0
Web-Authn completo-app
Visualização online
Um aplicativo completo baseado na API WebAuthn, que permite que os sites autentiquem usuários com o autenticador interno no navegador/sistema (como Apple TouchID e Windows Hello ou sensor biométrico de dispositivos móveis). Ele substituirá senhas , que é o futuro da autenticação on -line.
