version rocket
1.7.1
Bahasa Inggris | 简体中文
Perpustakaan Alat untuk Deteksi Versi Aplikasi Web dan Pemberitahuan Penyebaran.
Katalog
Versi-Rocket berisi dua modul fungsional: Versi Web Deteksi Real-Time , Pesan Penerapan Otomatis ke Lark atau WECOM Group Chat
Anda dapat menggunakan modul secara terpisah sesuai dengan kebutuhan, atau menggunakannya bersama -sama
Kapan cocok untuk menggunakan Deteksi Real-Time Versi Aplikasi Web ? -Menel: situasi semacam ini sering terjadi. Ketika pengguna membuka aplikasi web di browser untuk waktu yang lama dan belum menyegarkan halaman. Ketika aplikasi memiliki pembaruan versi baru atau perbaikan masalah, pengguna tidak akan tahu bahwa ada versi baru rilis, yang akan mengarah ke pengguna. Terus gunakan versi lama untuk memengaruhi pengalaman pengguna dan akurasi data back-end.
Kapan cocok untuk digunakan untuk secara otomatis mengirim pesan penempatan ke obrolan grup lark atau wecom ? -Menel: Mungkin ada situasi seperti itu dalam kerja sama tim. Sebagai insinyur front-end, Anda perlu berkomunikasi secara verbal dengan anggota tim setelah setiap penempatan. Tidak ada catatan penempatan untuk diikuti.
Webhook . Setelah penempatan aplikasi berhasil, melalui robot obrolan grup, berita "penyebaran yang berhasil" akan secara otomatis didorong ke obrolan grup.Jika Anda memiliki kebutuhan dorong platform lain, Anda dapat menyebutkan masalah
v1.7.0Versi Aplikasi Web Deteksi real-time:
Web Worker API berdasarkan JavaScript untuk melakukan pemantauan pemantauan, yang tidak mempengaruhi proses rendering browser.Web Worker API berdasarkan JavaScript untuk melakukan pemantauan pemantauan, yang tidak mempengaruhi proses rendering browser. v1.7.0Secara otomatis mengirim pesan penyebaran ke Lark atau WECOM Group Chat: Versi-Rocket Call Metode WebHook yang disediakan oleh Software Office Kolaboratif untuk memicu robot obrolan grup mengirim pesan.
# Choose a package manager you prefer
# npm
npm install version-rocket --save
# yarn
yarn add version-rocket
# pnpm
pnpm install version-rocket
Langkah 1: Impor checkVersion() , dan gunakan
// 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 } )
Langkah 2: Setelah mengeksekusi perintah kustom generate-version-file , hasilkan file version.json , digunakan untuk menyebarkan ke server jarak jauh
VERSION (Opsional): Saat versi kustom diperlukan, itu diteruskan. Nilai default adalah bidang Versi Package.json
Direktori Output File (Opsional): Direktori Output Version.json yang Ditentukan Pengguna , yang merupakan direktori dist secara default
EXTERNAL (Opsional): Ketika Anda ingin menyimpan lebih banyak informasi ke version.json , seperti konten yang dimodifikasi dari versi saat ini atau hal-hal lain yang perlu ditampilkan pada pop-up (digunakan dalam OnVersionUpdate Kustom UI) v1.6.0
EXTERNAL_PATH (Opsional) ： Menerima jalur file, yang disarankan ketika banyak informasi tambahan perlu ditulis ke version.json . Ketika EXTERNAL dan EXTERNAL_PATH diatur, prioritas lebih rendah dari EXTERNAL （digunakan dalam onVersionUpdate UI khusus） v1.6.1
Penggunaan Versi
// 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"
. . .
} ,
...
} Eksternal v1.6.0 dan External_Path v1.6.1 Penggunaan
Format JSON Harap gunakan alat ini untuk melarikan diri klik di sini
// 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 " ;
}
...
}
...
}Lengkapi dua langkah di atas, fungsi pemantauan versi (melalui manajemen nomor versi) dapat digunakan secara normal ??
v1.7.0
️ Pengingat yang Ramah: Metode ini tidak mendukung menampilkan "perubahan versi saat ini atau informasi lain yang perlu ditampilkan di jendela prompt". Jika Anda memiliki persyaratan seperti itu, silakan gunakan metode "Manajemen Versi".
impor checkVersion() , dan gunakan itu
// 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 } )
Setelah menyelesaikan langkah -langkah di atas, fitur pemantauan versi (dengan mendeteksi pembaruan dalam konten file yang ditentukan) dapat digunakan secara normal ??
// 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' ,
}
)Atau atur gambar prompt
// 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' ,
}
) 
Langkah 1:
lark-message-config.json di direktori root proyek untuk mengatur teks kartu pesanMESSAGE_PATH (opsional): Lulus jika Anda perlu menyesuaikan jalur file atau nama file (parameter ini berguna jika Anda perlu membedakan lingkungan penyebaran). Secara default, file lark-message-config.json di direktori root digunakanPACKAGE_JSON_PATH (opsional): Lulus jika Anda perlu menyesuaikan jalur ke file package.json (parameter ini mungkin berguna untuk penyebaran proyek monorepo). Standarnya adalah mendapatkan file package.json di jalur root // 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"
. . .
} ,
...
} Langkah 2: Setel 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"
} Jika salinan kartu Anda akan dihasilkan sesuai dengan kondisi, Anda dapat lulus di bidang MESSAGE_JSON ditentukan sendiri, seperti versi, judul, dll
Catatan: MESSAGE_JSON perlu diloloskan
// 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"
. . .
} ,
...
}Atau setelah variabel ekspor, kutipan di package.json (tidak mendukung 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"
} 
Langkah 1:
message-config.json di direktori root proyek untuk mengatur teks kartu pesanMESSAGE_PATH (opsional): Lulus ketika Anda perlu menyesuaikan jalur file atau nama file (parameter ini berguna jika Anda perlu membedakan lingkungan penyebaran). Standarnya adalah menggunakan file pesan config.json di direktori rootPACKAGE_JSON_PATH (opsional): Lulus ketika jalur khusus ke file package.json diperlukan (parameter ini mungkin berguna untuk penyebaran proyek monorepo). Standarnya adalah mendapatkan file package.json di jalur root // 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"
. . .
} ,
...
} Langkah 2: Atur 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"
} Jika salinan kartu Anda akan dihasilkan sesuai dengan kondisi, Anda dapat lulus di bidang MESSAGE_JSON ditentukan sendiri, seperti versi, judul, dll
Catatan: MESSAGE_JSON perlu diloloskan
// 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"
. . .
} ,
...
}Atau setelah variabel ekspor, kutipan di package.json (tidak mendukung 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"
} 
Fungsi CheckVersion
Aktifkan Deteksi Versi Aplikasi Real-Time
| Params | Jenis | Keterangan | Bawaan | Diperlukan |
|---|---|---|---|---|
| konfigurasi | obyek | Item konfigurasi pemantauan versi | Ya | |
| config.originversionfileurl | rangkaian | Jalur ke file version.json di server jarak jauh | Ya | |
| config.localpackageVersion | rangkaian | Versi aplikasi saat ini biasanya mengambil bidang versi package.json untuk perbandingan dengan file versi.json dari server jarak jauh | Ya | |
| config.pollingtime | nomor | Interval waktu untuk pemantauan pemilihan, di MS | 5000 | TIDAK |
| config.imediate | Boolean | Pada kunjungan pertama, pemantauan versi akan segera dipicu, dan kemudian pemungutan suara akan dilakukan pada interval waktu yang disesuaikan v1.5.0 | PALSU | TIDAK |
| config.checkoriginspecifiedFilesUrl | array | Mengatur properti ini akan menggunakan 'mendeteksi pembaruan dalam konten file tertentu' bukan 'manajemen nomor versi' untuk memantau versi. Lulus dalam daftar alamat file yang akan dipantau, biasanya file index.html di bawah domain tertentu (deduplikasi otomatis) v1.7.0 | PALSU | |
| config.checkoriginspecifiedFilesUrlMode | 'satu' / 'semua' | 'Satu' berarti bahwa jika konten alamat file apa pun dalam daftar berubah, prompt untuk pembaruan akan ditampilkan; 'Semua' berarti bahwa prompt untuk pembaruan hanya akan ditampilkan ketika konten semua alamat file dalam daftar berubah. (Ini hanya berlaku saat checkoriginspecifiedFilesUrl dikonfigurasi) v1.7.0 | 'satu' | PALSU |
| config.enable | Boolean | Apakah akan mengaktifkan pemantauan versi. Item konfigurasi ini dapat digunakan untuk mengaktifkan pemantauan versi hanya di lingkungan tertentu v1.7.0 | BENAR | 否 |
| config.clearintervalondialog | Boolean | Saat dialog prompt untuk versi baru muncul, hapus timer v1.7.0 | PALSU | 否 |
| config.onversionUpdate | fungsi (data) | Fungsi Callback untuk Versi Kustom Petunjuk UI (jika Anda ingin menyesuaikan UI popup, Anda bisa mendapatkan nilai pengembalian melalui fungsi callback untuk mengontrol penampilan popup) | TIDAK | |
| config.onrefresh | fungsi (data) | Konfirmasi Pembaruan: Fungsi Callback dari Acara Refresh Kustom, di mana data adalah versi terbaru v1.5.0 | TIDAK | |
| config.oncancel | fungsi (data) | Batalkan Pembaruan: Fungsi panggilan balik dari acara Batal Kustom, di mana data adalah versi terbaru v1.5.0 | TIDAK | |
| opsi | obyek | Item konfigurasi untuk teks dan tema popup (tidak menyesuaikan UI popup, tetapi gunakan jika Anda perlu memodifikasi teks dan tema) | TIDAK | |
| Options.Title | rangkaian | Judul popup | Memperbarui | TIDAK |
| Options.Description | rangkaian | Deskripsi sembulan | V xxx tersedia | TIDAK |
| opsi.buttontext | rangkaian | Teks tombol popup | Menyegarkan | TIDAK |
| Options.CancelButtontext | rangkaian | Teks untuk menutup tombol pop-up (tambahkan opsi ini, jika Anda ingin pop-up diizinkan untuk ditutup) v1.5.0 | TIDAK | |
| Options.CancelMode | abaikan-arus-versi / pengabdian / pengabaian-arus-arus | Tutup mode pop-up (itu berlaku saat cancelButTontext diatur) v1.5.0 | abaikan versi arus-arus | TIDAK |
| Options.CancelupDateAndStopWorker | Boolean | Ketika popup dibatalkan, pekerja juga dihentikan (itu berlaku saat CancelButTontext diatur) v1.5.0 | PALSU | 否 |
| option.imageUrl | rangkaian | Gambar popup | TIDAK | |
| Options.RocketColor | rangkaian | Warna tema gambar popup roket, setelah pengaturan opsi.ImageUrl tidak valid | TIDAK | |
| option.primaryColor | rangkaian | Warna tema popup, itu akan memengaruhi warna latar belakang gambar petunjuk dan warna latar belakang tombol, setelah pengaturan ImageUrl tidak valid | TIDAK | |
| Options.ButtonStyle | rangkaian | Konfigurasi CSS tombol pop-up dapat mengganti gaya tombol default | TIDAK |
fungsi unceckversion
Hentikan proses
workeryang dibuat setelah memanggilcheckVersion
| Params | Jenis | Keterangan | Bawaan | Diperlukan |
|---|---|---|---|---|
| closedialog | Boolean | Apakah akan menutup jendela pop-up pembaruan versi prompt | - | Ya |
| pekerja penutup | Boolean | Apakah akan menutup pekerja | BENAR | TIDAK |
npm run test Versi-Rocket adalah perangkat lunak open source dengan Apache License 2.0
Web-authn-coved-app
Pratinjau online
Aplikasi lengkap berdasarkan WebAuthn API, yang memungkinkan situs web untuk mengotentikasi pengguna dengan authenticator bawaan di browser/sistem (seperti Apple TouchID dan Windows Hello atau sensor biometrik perangkat seluler). Ini akan menggantikan kata sandi , yang merupakan masa depan otentikasi online.
