version rocket
1.7.1
Anglais | 简体中文
Une bibliothèque d'outils pour la notification de détection et de déploiement de la version d'application Web.
Catalogue
Version-Rocket contient deux modules fonctionnels: la version de l'application Web Détection en temps réel , Message de déploiement automatique à Lark ou WECOM GROUP CHAT
Vous pouvez utiliser un module séparément en fonction des besoins, ou l'utiliser ensemble
Quand est-il adapté d'utiliser la version en temps réel de la version de l'application Web ? -La scène: ce genre de situation se produit souvent. Lorsque l'utilisateur ouvre une application Web dans le navigateur pendant longtemps et n'a pas actualisé la page. Lorsque l'application a une nouvelle mise à jour de version ou la réparation du problème, l'utilisateur ne saura pas qu'il existe une nouvelle version de la version, ce qui mènera à l'utilisateur. Continuez à utiliser d'anciennes versions pour affecter l'expérience utilisateur et la précision des données arrière.
Quand est-il adapté à utiliser pour envoyer automatiquement des messages de déploiement au chat de groupe LARK ou WECOM ? -La scène: il peut y avoir une telle situation dans la coopération par équipe. En tant qu'ingénieur frontal, vous devez communiquer verbalement avec les membres de l'équipe après chaque déploiement. Il n'y a pas de dossiers de déploiement à suivre.
Webhook . Une fois le déploiement de l'application réussi, via des robots de chat de groupe, les nouvelles du "déploiement réussi" seront automatiquement poussées vers le chat de groupe.Si vous avez les besoins en poussée d'autres plateformes, vous pouvez mentionner les problèmes
v1.7.0Version de l'application Web Détection en temps réel:
Web Worker API en fonction de JavaScript pour effectuer un sondage de surveillance, qui n'affecte pas le processus de rendu du navigateur.Web Worker API en fonction de JavaScript pour effectuer un sondage de surveillance, qui n'affecte pas le processus de rendu du navigateur. v1.7.0Envoyez automatiquement les messages de déploiement à Lark ou WECOM GROUP CHAT: Version-Rocket Appelez la méthode WebHook fournie par Collaborative Office Software pour déclencher des robots de chat de groupe Envoyer des messages.
# Choose a package manager you prefer
# npm
npm install version-rocket --save
# yarn
yarn add version-rocket
# pnpm
pnpm install version-rocket
Étape 1: Importer checkVersion() et l'utiliser
// 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 } )
Étape 2: Après l'exécution de la commande personnalisée generate-version-file , générez le fichier version.json , utilisé pour se déployer sur un serveur distant
VERSION (Facultatif): Lorsque la version personnalisée est requise, elle est transmise. La valeur par défaut est le champ Package.json Version
Répertoire de sortie de fichier (facultatif): répertoire de sortie défini par l'utilisateur , qui est le répertoire DIST par défaut
EXTERNAL (facultatif): Lorsque vous souhaitez enregistrer plus d'informations sur version.json , tels que le contenu modifié de la version actuelle ou d'autres choses qui doivent être affichées sur la fenêtre contextuelle (utilisée dans Inversionupdate Custom UI) v1.6.0
EXTERNAL_PATH (facultatif): accepte un chemin de fichier, recommandé lorsque beaucoup d'informations supplémentaires doivent être écrites sur version.json . Lorsque les deux EXTERNAL et EXTERNAL_PATH sont définis, la priorité est inférieure à EXTERNAL （utilisée dans Inversionupdate Custom UI） v1.6.1
Utilisation de la version
// 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 externe et external_path v1.6.1 Utilisation
Format JSON Veuillez utiliser cet outil pour échapper à Cliquez ici
// 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 " ;
}
...
}
...
}Terminez les deux étapes ci-dessus, la fonction de surveillance de version (via la gestion du numéro de version) peut être utilisée normalement ??
v1.7.0
️ Rappel convivial: cette méthode ne prend pas en charge l'affichage "des modifications de version actuelles ou d'autres informations qui doivent être affichées dans la fenêtre d'invite". Si vous avez une telle exigence, veuillez utiliser la méthode "Management de version".
Importer checkVersion() et l'utiliser
// 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 } )
Après avoir terminé les étapes ci-dessus, la fonction de surveillance de la version (en détectant les mises à jour dans le contenu du fichier spécifié) peut être utilisée normalement ??
// 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 définir une image rapide
// 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' ,
}
) 
Étape 1:
lark-message-config.json dans le répertoire racine du projet pour définir le texte de la carte de messageMESSAGE_PATH (facultatif): passé si vous devez personnaliser le chemin du fichier ou le nom de fichier (ce paramètre est utile si vous devez différencier l'environnement de déploiement). Par défaut, le fichier Lark-Message-Config.json dans le répertoire racine est utiliséPACKAGE_JSON_PATH (facultatif): passé si vous devez personnaliser le chemin du fichier package.json (ce paramètre peut être utile pour les déploiements de projets MonorePo). La valeur par défaut est d'obtenir le fichier package.json dans le chemin racine // 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"
. . .
} ,
...
} Étape 2: Définissez 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"
} Si votre copie de carte sera générée en fonction des conditions, vous pouvez passer dans le champ MESSAGE_JSON est autodéfini, comme la version, le titre, etc.
Remarque: MESSAGE_JSON doit être échappé
// 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 après les variables d'exportation, cite dans package.json (pas de prise en charge de 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"
} 
Étape 1:
message-config.json dans le répertoire racine du projet pour définir le texte de la carte de messageMESSAGE_PATH (facultatif): passé lorsque vous devez personnaliser le chemin du fichier ou le nom de fichier (ce paramètre est utile si vous devez différencier l'environnement de déploiement). La valeur par défaut consiste à utiliser le fichier Message-Config.json dans le répertoire racinePACKAGE_JSON_PATH (facultatif): passé lorsqu'un chemin personnalisé vers le fichier package.json est requis (ce paramètre peut être utile pour les déploiements de projets Monorepo). La valeur par défaut est d'obtenir le fichier package.json dans le chemin racine // 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"
. . .
} ,
...
} Étape 2: Définissez 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"
} Si votre copie de carte sera générée en fonction des conditions, vous pouvez passer dans le champ MESSAGE_JSON est autodéfini, comme la version, le titre, etc.
Remarque: MESSAGE_JSON doit être échappé
// 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 après les variables d'exportation, cite dans package.json (pas de prise en charge de 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"
} 
fonction de vérification
Activer la détection de version d'application en temps réel
| Paramètres | Taper | Description | Défaut | Requis |
|---|---|---|---|---|
| configurer | objet | Élément de configuration de surveillance de la version | Oui | |
| config.originversionfileurl | chaîne | Le chemin d'accès vers le fichier version.json sur le serveur distant | Oui | |
| config.LocalPackageVersion | chaîne | La version de l'application actuelle prend généralement le champ de version de package.json à titre de comparaison avec le fichier version.json du serveur distant | Oui | |
| config.pollingtime | nombre | Intervalle de temps pour la surveillance des sondages, en SEP | 5000 | Non |
| config.immediate | booléen | Lors de la première visite, la surveillance des versions sera déclenchée immédiatement, puis le sondage sera effectué à un intervalle de temps personnalisé v1.5.0 | FAUX | Non |
| config.checkoriginspecifiedFilesUrl | tableau | La définition de cette propriété utilisera les «mises à jour de détection dans le contenu de fichiers spécifié» au lieu de la «gestion du numéro de version» pour surveiller les versions. Passez la liste des adresses de fichier à surveiller, généralement le fichier index.html dans un certain domaine (déduplication automatique) v1.7.0 | FAUX | |
| config.checkoriginspecifiedFilesUrlMode | 'un' / 'tout' | «Un» signifie que si le contenu d'une adresse de fichier dans la liste change, une invite pour une mise à jour sera affichée; «Tout» signifie qu'une invite pour une mise à jour ne sera affichée que lorsque le contenu de toutes les adresses de fichier dans la liste change. (Cela ne prend effet que lorsque CheckorigInSpecifiedFilesUrl est configuré) v1.7.0 | 'un' | FAUX |
| config.enable | booléen | S'il faut activer la surveillance des versions. Cet élément de configuration peut être utilisé pour activer la surveillance des versions uniquement dans des environnements spécifiés v1.7.0 | vrai | 否 |
| config.clearintervalondialog | booléen | Lorsque la boîte de dialogue de l'invite pour une nouvelle version apparaît, effacez la minuterie v1.7.0 | FAUX | 否 |
| config.onversionupdate | fonction (données) | Fonction de rappel pour l'interface utilisateur de la version personnalisée (si vous souhaitez personnaliser l'interface utilisateur contextuelle, vous pouvez obtenir la valeur de retour via la fonction de rappel pour contrôler l'apparence de la fenêtre contextuelle) | Non | |
| config.onrefresh | fonction (données) | Confirmer la mise à jour: la fonction de rappel de l'événement de rafraîchissement personnalisé, où les données sont la dernière version v1.5.0 | Non | |
| config.oncancel | fonction (données) | Mise à jour de l'annulation: la fonction de rappel de l'événement d'annulation personnalisée, où les données sont la dernière version v1.5.0 | Non | |
| options | objet | Éléments de configuration pour le texte et les thèmes contextuels (ne personnalisez pas l'interface utilisateur contextuelle, mais utilisez-le si vous devez modifier le texte et les thèmes) | Non | |
| options.Title | chaîne | Titre popup | Mise à jour | Non |
| options.Description | chaîne | Description popup | V xxx est disponible | Non |
| options.buttontext | chaîne | Texte du bouton de contexte | Rafraîchir | Non |
| options.cancelbuttontext | chaîne | Texte pour fermer le bouton contextuel (ajoutez cette option, si vous voulez que le fenêt contexaire soit autorisé à être proche) v1.5.0 | Non | |
| options.cancelMode | Ignore-Current-Version / ignore-today / ignorer-Current-Window | Fermer le mode contextuel (il prend effet lorsque CancelbuttonText est défini) v1.5.0 | ignorer la version courante | Non |
| options.canceLupdate andstopworker | booléen | Lorsque la fenêtre contextuelle est annulée, le travailleur est également arrêté (il prend effet lorsque CancelbuttonText est défini) v1.5.0 | FAUX | 否 |
| options.imageurl | chaîne | Image popup | Non | |
| OptionS.RocketColor | chaîne | La couleur du thème de l'image contextuelle de la fusée, après avoir réglé des options. ImageUrl n'est pas valide | Non | |
| options.primaryColor | chaîne | La couleur du thème de la fenêtre contextuelle, elle affectera la couleur de l'arrière-plan de l'image d'astuce et la couleur de l'arrière-plan du bouton, après la définition de l'imageurl, n'est pas valide | Non | |
| options.buttonstyle | chaîne | La configuration CSS des boutons contextuelles peut remplacer le style de bouton par défaut | Non |
Fonction de non-vérification
Terminez le processus
workercréé après avoir appelécheckVersion
| Paramètres | Taper | Description | Défaut | Requis |
|---|---|---|---|---|
| fermé | booléen | S'il faut fermer la fenêtre pop-up de mise à jour de mise à jour de la version | - | Oui |
| grossier | booléen | S'il faut fermer le travailleur | vrai | Non |
npm run test Version-Rocket est un logiciel open source avec Apache Licence 2.0
Web-Authn-Completed-App
Aperçu en ligne
Une application complète basée sur l'API WebAuthn, qui permet aux sites Web d'authentifier les utilisateurs avec l'authentificateur intégré dans le navigateur / système (tel qu'Apple TouchId et Windows Hello ou Biométric de capteurs mobiles). Il remplacera les mots de passe , qui est l'avenir de l'authentification en ligne.
