version rocket
1.7.1
Englisch | 简体中文
Eine Toolbibliothek für die Erkennung von Webanwendungen und die Bereitstellungsbenachrichtigung.
Katalog
Versions-Rocket enthält zwei funktionale Module: Webanwendung Version Echtzeiterkennung , automatische Bereitstellungsnachricht an Lark oder Wecom Group Chat
Sie können ein Modul separat entsprechend den Anforderungen verwenden oder zusammen verwenden
Wann ist es geeignet, die Echtzeit-Erkennung von Webanwendungen zu verwenden? -Die Szene: Diese Art von Situation passiert oft. Wenn der Benutzer lange Zeit eine Webanwendung im Browser öffnet und die Seite nicht aktualisiert hat. Wenn die Anwendung über ein neues Versions -Update oder die Problemreparatur verfügt, weiß der Benutzer nicht, dass es eine neue Version der Version gibt, die zum Benutzer führt. Verwenden Sie weiterhin alte Versionen, um die Benutzererfahrung und die Back-End-Datengenauigkeit zu beeinflussen.
Wann ist es geeignet , automatisch Bereitstellungsnachrichten an Lark oder Wecom Group Chat zu senden ? -Die Szene: In der Teamzusammenarbeit kann es eine solche Situation geben. Als Front-End-Ingenieur müssen Sie nach jedem Einsatz verbal mit Teammitgliedern kommunizieren. Es gibt keine Bereitstellungsdatensätze.
Webhook Methode. Nachdem die Anwendungsbereitstellung erfolgreich ist, wird durch Gruppen -Chat -Roboter die Nachrichten der "erfolgreichen Bereitstellung" automatisch in den Gruppenchat übertroffen.Wenn Sie die Push -Bedürfnisse anderer Plattformen haben, können Sie Probleme erwähnen
v1.7.0Webanwendungsversion Echtzeiterkennung:
Web Worker API , um die Überwachungsabfragen durchzuführen, was den Browser -Rendering -Prozess nicht beeinflusst.Web Worker API , um die Überwachungsabfragen durchzuführen, was den Browser -Rendering -Prozess nicht beeinflusst. v1.7.0Senden Sie automatisch Bereitstellungsnachrichten an Lark- oder Wecom-Gruppen-Chat: Version-Rocket -Rufen Sie die von Collaborative Office-Software bereitgestellte Webhook-Methode an, um Gruppen-Chat-Roboter auszulösen. Senden Sie Nachrichten.
# Choose a package manager you prefer
# npm
npm install version-rocket --save
# yarn
yarn add version-rocket
# pnpm
pnpm install version-rocket
Schritt 1: Import checkVersion() und verwenden Sie es
// 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 } )
Schritt 2: Generieren Sie die generate-version-file version.json , die zum Bereitstellen auf einem Remote-Server verwendet wird
VERSION (optional): Wenn eine benutzerdefinierte Version erforderlich ist, wird sie übergeben. Der Standardwert ist Package.json -Version Feld
Dateiausgabeverzeichnis (optional): Benutzerdefinierte Version.json -Ausgabeverzeichnis , das standardmäßig das DIST -Verzeichnis ist
EXTERNAL (optional): Wenn Sie weitere Informationen auf version.json speichern möchten, z v1.6.0
EXTERNAL_PATH (optional) ： akzeptiert einen Dateipfad, der empfohlen wird, wenn viele zusätzliche Informationen auf version.json geschrieben werden müssen. Wenn sowohl EXTERNAL als EXTERNAL_PATH festgelegt sind, ist die Priorität niedriger als EXTERNAL （für die benutzerdefinierte UI） v1.6.1 verwendet.
Versionsnutzung
// 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"
. . .
} ,
...
} Externe v1.6.0 und external_path v1.6.1 Nutzung
JSON -Format Bitte verwenden Sie dieses Tool, um zu entkommen, hier klicken Sie hier
// 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 " ;
}
...
}
...
}Führen Sie die beiden oben genannten Schritte aus. Die Versionsüberwachungsfunktion (durch Versionsnummernverwaltung) kann normal verwendet werden?
v1.7.0
Euen Freundliche Erinnerung: Diese Methode unterstützt nicht die Anzeige "aktuelle Versionsänderungen oder andere Informationen, die im Eingabeaufforderungfenster angezeigt werden müssen". Wenn Sie eine solche Anforderung haben, verwenden Sie bitte die Methode "Versionsverwaltung".
Import checkVersion() und verwenden Sie es
// 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 } )
Nach Abschluss der oben genannten Schritte kann die Versionsüberwachungsfunktion (durch Erkennung von Aktualisierungen in angegebenen Dateiinhalten) normal verwendet werden?
// 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' ,
}
)Oder Eingabeaufforderung Bild setzen
// 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' ,
}
) 
Schritt 1:
lark-message-config.json im Projektroot-Verzeichnis, um den Text der Nachrichtenkarte festzulegenMESSAGE_PATH (optional): Übergeben, wenn Sie den Dateipfad oder den Dateinamen anpassen müssen (dieser Parameter ist nützlich, wenn Sie die Bereitstellungsumgebung unterscheiden müssen). Standardmäßig wird die Datei Lark-Message-config.json im Stammverzeichnis verwendetPACKAGE_JSON_PATH (optional): bestanden, wenn Sie den Pfad an die Paket.json -Datei anpassen müssen (dieser Parameter kann für Bereitstellungen von Monorepo -Projekten nützlich sein). Die Standardeinstellung besteht darin, die Datei Package.json in den Stammpfad zu erhalten // 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"
. . .
} ,
...
} Schritt 2: lark-message-config.json setzen
// 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"
} Wenn Ihre Kartenkopie gemäß den Bedingungen generiert wird, können Sie in MESSAGE_JSON Feld wie Version, Titel usw. selbst definiert werden
HINWEIS: MESSAGE_JSON muss entkommen werden
// 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"
. . .
} ,
...
}Oder nach Exportvariablen zitieren Sie in package.json (nicht Windows unterstützen).
// 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"
} 
Schritt 1:
message-config.json im Projektroot-Verzeichnis, um den Text der Nachrichtenkarte festzulegenMESSAGE_PATH (optional): Übergeben, wenn Sie den Dateipfad oder den Dateinamen anpassen müssen (dieser Parameter ist nützlich, wenn Sie die Bereitstellungsumgebung unterscheiden müssen). Die Standardeinstellung besteht darin, die Datei message-config.json im Stammverzeichnis zu verwendenPACKAGE_JSON_PATH (optional): Übergeben, wenn ein benutzerdefinierter Pfad zur Datei package.json erforderlich ist (dieser Parameter kann für Bereitstellungen von Monorepo -Projekten nützlich sein). Die Standardeinstellung besteht darin, die Datei Package.json in den Stammpfad zu erhalten // 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"
. . .
} ,
...
} Schritt 2: Setzen Sie 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"
} Wenn Ihre Kartenkopie gemäß den Bedingungen generiert wird, können Sie in MESSAGE_JSON Feld wie Version, Titel usw. selbst definiert werden
HINWEIS: MESSAGE_JSON muss entkommen werden
// 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"
. . .
} ,
...
}Oder nach Exportvariablen zitieren Sie in package.json (nicht Windows unterstützen).
// 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"
} 
Checkversion -Funktion
Aktivieren Sie die Echtzeit-App-Versionserkennung
| Parameter | Typ | Beschreibung | Standard | Erforderlich |
|---|---|---|---|---|
| Konfiguration | Objekt | Versionsüberwachungskonfigurationselement | Ja | |
| config.originversionFileurl | Saite | Der Pfad zur Datei Version.json auf dem Remote -Server | Ja | |
| config.LocalPackageVersion | Saite | Die Version der aktuellen Anwendung nimmt normalerweise das Versionsfeld von package.json zum Vergleich mit der Datei Version.json des Remote -Servers ein | Ja | |
| config.pollingTime | Nummer | Zeitintervall für die Wahlüberwachung in MS | 5000 | NEIN |
| config.Immediate | boolean | Beim ersten Besuch wird die Versionsüberwachung sofort ausgelöst, und dann wird die Umfrage in einem maßgeschneiderten Zeitintervall v1.5.0 durchgeführt | FALSCH | NEIN |
| config.CheckoriginSpecifiedFilesurl | Array | Durch das Festlegen dieser Eigenschaft werden "Aktualisierungen in den angegebenen Dateiinhalten" anstelle von "Versionsnummernverwaltung" erfasst, um Versionen zu überwachen. Geben Sie die Liste der zu überwachenden Dateiadressen ein, normalerweise die Datei idex.html unter einer bestimmten Domäne (automatische Deduplizierung) v1.7.0 | FALSCH | |
| config.CheckoriginSpecifiedFileSurlMode | 'eins' / 'alles' | "Eins" bedeutet, dass, wenn der Inhalt einer Dateiadresse in der Liste ändert, eine Eingabeaufforderung für ein Update angezeigt wird. "Alles" bedeutet, dass eine Eingabeaufforderung für ein Update nur angezeigt wird, wenn der Inhalt aller Dateiadressen in der Liste ändert. (Dies wirksam, wenn CheckoriginSpecifiedFilesurl konfiguriert ist) v1.7.0 | 'eins' | FALSCH |
| config.enable | boolean | Ob die Versionsüberwachung aktiviert werden soll. Dieses Konfigurationselement kann verwendet werden, um die Versionsüberwachung nur in bestimmten Umgebungen v1.7.0 zu aktivieren | WAHR | 否 |
| config.clearIntervalondialog | boolean | Wenn der Eingabeaufforderung -Dialog für eine neue Version angezeigt wird, löschen Sie den Timer v1.7.0 | FALSCH | 否 |
| config.onversionUpdate | Funktion (Daten) | Rückruffunktion für die benutzerdefinierte Version Hinweis UI (Wenn Sie die Popup -Benutzeroberfläche anpassen möchten, können Sie den Rückrufwert über die Rückruffunktion erhalten, um das Erscheinungsbild des Popups zu steuern). | NEIN | |
| config.onrefresh | Funktion (Daten) | Aktualisierung bestätigen: Die Rückruffunktion des benutzerdefinierten Aktualisierungsereignisses, bei dem Daten die neueste Version v1.5.0 sind | NEIN | |
| config.oncancel | Funktion (Daten) | Update abbrechen: Die Rückruffunktion des benutzerdefinierten Abbrechenereignisses, bei dem Daten die neueste Version v1.5.0 sind | NEIN | |
| Optionen | Objekt | Konfigurationselemente für Popup -Text und Themen (nicht die Popup -Benutzeroberfläche anpassen, aber verwenden Sie sie, wenn Sie den Text und die Themen ändern müssen). | NEIN | |
| Optionen.titel | Saite | Popup -Titel | Aktualisieren | NEIN |
| Optionen.Deskription | Saite | Popup -Beschreibung | V xxx ist verfügbar | NEIN |
| Optionen.ButtonText | Saite | Popup -Schaltfläche Text | Aktualisieren | NEIN |
| Optionen.CancelButtonText | Saite | Text zum Schließen der Popup-Schaltfläche (fügen Sie diese Option hinzu, wenn Sie möchten, dass das Popup schließen kann) v1.5.0 | NEIN | |
| Optionen.CancelMode | Ignorieren Sie die Stromversorgung / Ignorieren Sie Today / Ignorieren Sie die Stromwindows | Pop-up-Modus schließen (es wirksam, wenn der AbbrechenbuttonText festgelegt ist) v1.5.0 | Ignorieren Sie die Stromversion | NEIN |
| Optionen.CancelUpDateandStopworker | boolean | Wenn das Popup abgesagt wird, wird auch der Arbeiter gestoppt (es wirksam, wenn der Abbrechen der Absage festgelegt ist) v1.5.0 | FALSCH | 否 |
| Optionen.imageurl | Saite | Popup -Bild | NEIN | |
| Optionen.RocketColor | Saite | Die Themenfarbe des Popup -Bilds der Rakete nach Einstellung der Optionen.imageurl ist ungültig | NEIN | |
| Optionen.PrimaryColor | Saite | Die Themenfarbe des Popups, die sich auf die Hintergrundfarbe und die Button -Hintergrundfarbe des Hinweisbildes auswirkt, ist nach dem Einstellen von ImageRl ungültig | NEIN | |
| Optionen.ButtonStyle | Saite | Die CSS | NEIN |
Deaktivierungsfunktion
Beenden Sie den nach dem Aufruf von
checkVersionerstelltenworker
| Parameter | Typ | Beschreibung | Standard | Erforderlich |
|---|---|---|---|---|
| geschlosseneralog | boolean | Unabhängig davon | - - | Ja |
| Closeworker | boolean | Ob der Arbeiter schließen soll | WAHR | NEIN |
npm run test Versions-Rocket ist Open-Source-Software mit Apache Lizenz 2.0
Web-Authn-Completed-App
Online -Vorschau
Eine vollständige Anwendung basierend auf WebAuthn-API, mit der Websites Benutzer mit dem integrierten Authentikator im Browser/System (z. B. Apple TouchID und Windows Hello oder biometrischer Sensor von mobilen Geräten) authentifizieren können. Es wird Passwörter ersetzen , was die Zukunft der Online -Authentifizierung ist.
