version rocket
1.7.1
الإنجليزية | 简体中文
مكتبة أدوات لاكتشاف إصدار تطبيق الويب وإخطار النشر.
كتالوج
يحتوي الإصدار-Rocket على وحدتين وظيفيتين: إصدار تطبيق الويب في الوقت الفعلي ، أو رسالة نشر تلقائية إلى Lark أو WeCom Group Chat
يمكنك استخدام وحدة نمطية بشكل منفصل وفقًا للاحتياجات ، أو استخدامها معًا
متى يكون من المناسب استخدام إصدار تطبيق الويب في الوقت الفعلي ؟ -المشهد: يحدث هذا النوع من الموقف غالبًا. عندما يفتح المستخدم تطبيق ويب في المتصفح لفترة طويلة ولم ينجح الصفحة. عندما يكون للتطبيق تحديث إصدار جديد أو إصلاح المشكلات ، فلن يعرف المستخدم أن هناك إصدارًا جديدًا من الإصدار ، سيؤدي إلى المستخدم. استمر في استخدام الإصدارات القديمة للتأثير على تجربة المستخدم ودقة البيانات الخلفية.
متى تكون مناسبة للاستخدام لإرسال رسائل النشر تلقائيًا إلى دردشة Lark أو Wecom Group ؟ -المشهد: قد يكون هناك مثل هذا الموقف في التعاون الجماعي. كمهندس واجهة ، تحتاج إلى التواصل لفظيًا مع أعضاء الفريق بعد كل عملية نشر. لا توجد سجلات نشر يجب اتباعها.
Webhook . بعد نجاح نشر التطبيق ، من خلال مجموعة روبوتات الدردشة الجماعية ، سيتم دفع أخبار "النشر الناجح" تلقائيًا إلى الدردشة الجماعية.إذا كان لديك احتياجات الدفع للمنصات الأخرى ، فيمكنك ذكر المشكلات
v1.7.0إصدار تطبيق الويب الكشف في الوقت الفعلي:
Web Worker API استنادًا إلى JavaScript لإجراء استطلاع الرصد ، والذي لا يؤثر على عملية تقديم المتصفح.Web Worker API استنادًا إلى JavaScript لإجراء استطلاع الرصد ، والذي لا يؤثر على عملية تقديم المتصفح. v1.7.0إرسال رسائل النشر تلقائيًا إلى دردشة Lark أو WeCom Group: الإصدار-الاتصال ، اتصل بأسلوب WebHook الذي يوفره برنامج Office Collaborative لإعداد روبوتات الدردشة الجماعية.
# Choose a package manager you prefer
# npm
npm install version-rocket --save
# yarn
yarn add version-rocket
# pnpm
pnpm install version-rocket
الخطوة 1: استيراد checkVersion() ، واستخدمه
// 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 } )
الخطوة 2: بعد تنفيذ الأمر المخصص generate-version-file ، قم بإنشاء ملف version.json ، يستخدم للنشر إلى خادم بعيد
VERSION (اختياري): عندما يكون الإصدار المخصص مطلوبًا ، يتم تمريره.
دليل إخراج الملف (اختياري): دليل الإخراج المحدد للمستخدم .
EXTERNAL (اختياري): عندما تريد حفظ مزيد من المعلومات إلى version.json ، مثل المحتوى المعدل للإصدار الحالي أو أشياء أخرى تحتاج إلى عرضها على المنبثقة (المستخدمة في Unversionupdate Custom UI) v1.6.0
EXTERNAL_PATH (اختياري) ： يقبل مسار الملف ، الموصى به عندما يجب كتابة الكثير من المعلومات الإضافية إلى version.json . عندما يتم تعيين كل من EXTERNAL EXTERNAL_PATH ، تكون الأولوية أقل من EXTERNAL （المستخدمة في UnversionUpdate Custom UI） v1.6.1
استخدام الإصدار
// 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 و external_path v1.6.1 الاستخدام
تنسيق JSON يرجى استخدام هذه الأداة للهروب انقر هنا
// 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 " ;
}
...
}
...
}أكمل خطوتين أعلاه ، يمكن استخدام وظيفة مراقبة الإصدار (من خلال إدارة أرقام الإصدار) بشكل طبيعي؟
v1.7.0
️ تذكير ودود: لا تدعم هذه الطريقة عرض "تغييرات الإصدار الحالية أو المعلومات الأخرى التي يجب عرضها في نافذة المطالبة". إذا كان لديك مثل هذا الشرط ، فيرجى استخدام طريقة "إدارة الإصدار".
استيراد checkVersion() ، واستخدمه
// 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 } )
بعد الانتهاء من الخطوات المذكورة أعلاه ، يمكن استخدام ميزة مراقبة الإصدار (عن طريق اكتشاف التحديثات في محتويات الملفات المحددة) بشكل طبيعي؟
// 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' ,
}
)أو تعيين صورة سريعة
// 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' ,
}
) 
الخطوة 1:
lark-message-config.json في دليل جذر المشروع لتعيين نص بطاقة الرسالةMESSAGE_PATH (اختياري): تم تمريره إذا كنت بحاجة إلى تخصيص مسار الملف أو اسم الملف (تكون هذه المعلمة مفيدة إذا كنت بحاجة إلى تمييز بيئة النشر). بشكل افتراضي ، يتم استخدام ملف lark-message-config.json في دليل الجذرPACKAGE_JSON_PATH (اختياري): تم تمريره إذا كنت بحاجة إلى تخصيص المسار إلى ملف package.json (قد تكون هذه المعلمة مفيدة لنشر مشاريع monorepo). الافتراضي هو الحصول على ملف package.json في مسار الجذر // 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"
. . .
} ,
...
} الخطوة 2: تعيين 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"
} إذا تم إنشاء نسخة بطاقتك وفقًا للشروط ، فيمكنك تمرير حقل MESSAGE_JSON محدد ذاتيًا ، مثل الإصدار ، العنوان ، إلخ
ملاحظة: يجب الهروب من MESSAGE_JSON
// 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"
. . .
} ,
...
}أو بعد متغيرات التصدير ، اقتبس في package.json (لا تدعم 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"
} 
الخطوة 1:
message-config.json في دليل جذر المشروع لتعيين نص بطاقة الرسائلMESSAGE_PATH (اختياري): تم تمريره عندما تحتاج إلى تخصيص مسار الملف أو اسم الملف (هذه المعلمة مفيدة إذا كنت بحاجة إلى التمييز بين بيئة النشر). الافتراضي هو استخدام ملف message-config.json في دليل الجذرPACKAGE_JSON_PATH (اختياري): تم تمريره عند الحاجة إلى مسار مخصص إلى ملف package.json (قد تكون هذه المعلمة مفيدة لنشر مشاريع monorepo). الافتراضي هو الحصول على ملف package.json في مسار الجذر // 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"
. . .
} ,
...
} الخطوة 2: تعيين 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"
} إذا تم إنشاء نسخة بطاقتك وفقًا للشروط ، فيمكنك تمرير حقل MESSAGE_JSON محدد ذاتيًا ، مثل الإصدار ، العنوان ، إلخ
ملاحظة: يجب الهروب من MESSAGE_JSON
// 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"
. . .
} ,
...
}أو بعد متغيرات التصدير ، اقتبس في package.json (لا تدعم 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"
} 
وظيفة التبرع
تمكين اكتشاف إصدار التطبيق في الوقت الفعلي
| params | يكتب | وصف | تقصير | مطلوب |
|---|---|---|---|---|
| تكوين | هدف | عنصر تكوين مراقبة الإصدار | نعم | |
| config.originversionfileurl | خيط | المسار إلى ملف الإصدار. json على الخادم البعيد | نعم | |
| config.localpackageVersion | خيط | عادةً ما يأخذ إصدار التطبيق الحالي حقل الإصدار من package.json للمقارنة مع ملف الإصدار. json من الخادم البعيد | نعم | |
| config.pollingTime | رقم | الفاصل الزمني لمراقبة الاقتراع ، في مرض التصلب العصبي المتعدد | 5000 | لا |
| config.immediate | منطقية | في الزيارة الأولى ، سيتم تشغيل مراقبة الإصدار على الفور ، ثم يتم إجراء الاقتراع في فترة زمنية مخصصة v1.5.0 | خطأ شنيع | لا |
| config.checkoriginspecifiedfilesurl | صفيف | سيستخدم تعيين هذه الخاصية "اكتشاف التحديثات في محتويات الملفات المحددة" بدلاً من "إدارة أرقام الإصدار" لمراقبة الإصدارات. تمرير في قائمة عناوين الملفات المراد مراقبتها ، وعادة ما يكون ملف INDEX.HTML ضمن مجال معين (إلغاء التداخل التلقائي) v1.7.0 | خطأ شنيع | |
| config.checkoriginspecifiedfilesurlMode | "واحد" / "الكل" | "واحد" يعني أنه إذا يتغير محتوى أي عنوان ملف في القائمة ، فسيتم عرض موجه للتحديث ؛ "الكل" يعني أنه سيتم عرض مطالبة للتحديث فقط عندما يتغير محتوى جميع عناوين الملفات في القائمة. (هذا يسري فقط عند تكوين checkoriginspecifiedfilesurl) v1.7.0 | 'واحد' | خطأ شنيع |
| config.enable | منطقية | سواء لتمكين مراقبة الإصدار. يمكن استخدام عنصر التكوين هذا لتمكين مراقبة الإصدار فقط في البيئات المحددة v1.7.0 | حقيقي | 否 |
| config.clearintervalondialog | منطقية | عندما يظهر مربع الحوار الموجه لإصدار جديد ، قم بمسح Timer v1.7.0 | خطأ شنيع | 否 |
| config.onversionupdate | وظيفة (البيانات) | وظيفة رد الاتصال للحصول على ui تلميح الإصدار المخصص (إذا كنت ترغب في تخصيص واجهة المستخدم المنبثقة ، يمكنك الحصول على قيمة الإرجاع من خلال وظيفة رد الاتصال للتحكم في ظهور المنبثقة) | لا | |
| config.onrefresh | وظيفة (البيانات) | تأكيد التحديث: وظيفة رد الاتصال لحدث التحديث المخصص ، حيث تكون البيانات أحدث إصدار v1.5.0 | لا | |
| config.oncancel | وظيفة (البيانات) | تحديث إلغاء: وظيفة رد الاتصال لحدث إلغاء مخصص ، حيث تكون البيانات أحدث إصدار v1.5.0 | لا | |
| خيارات | هدف | عناصر التكوين للنص المنبثقة والسمات (لا تخصيص واجهة المستخدم المنبثقة ، ولكن استخدمها إذا كنت بحاجة إلى تعديل النص والسمات) | لا | |
| Options.title | خيط | عنوانبوب | تحديث | لا |
| الخيارات | خيط | وصف منبثقة | V XXX متاح | لا |
| Options.buttontext | خيط | نص زر المنبثقة | ينعش | لا |
| Options.cancelbuttontext | خيط | نص على زر إغلاق المنبثقة (أضف هذا الخيار ، إذا كنت تريد السماح بإغلاق المنبثقة) v1.5.0 | لا | |
| Options.CancelMode | تجاهل النيور / تجاهل / تجاهل النافذة الزائفة | وضع القرب المنبثق (يسري مفعوله عند تعيين CancelButtonText) v1.5.0 | تجاهل النفقات | لا |
| Options.CancelupDateAndStopworker | منطقية | عندما يتم إلغاء المنبثقة ، يتم إيقاف العامل أيضًا (يتم سريان مفعوله عند تعيين نص CancelButtonTex) v1.5.0 | خطأ شنيع | 否 |
| الخيارات | خيط | صورة منبثقة | لا | |
| Options.RocketColor | خيط | لون صورة الصورة المنبثقة في الصاروخ ، بعد تعيين خيارات. Imageurl غير صالح | لا | |
| الخيارات. primarycolor | خيط | لون السمة من المنبثقة ، سيؤثر على لون خلفية صورة تلميح ولون خلفية الزر ، بعد تعيين Imageurl غير صالح | لا | |
| الخيارات | خيط | يمكن لتكوين CSS للأزرار المنبثقة تجاوز نمط الزر الافتراضي | لا |
وظيفة إلغاء تحديد
إنهاء عملية
workerالتي تم إنشاؤها بعد استدعاءcheckVersion
| params | يكتب | وصف | تقصير | مطلوب |
|---|---|---|---|---|
| مغلق | منطقية | ما إذا كان لإغلاق النافذة المنبثقة تحديث الإصدار | - | نعم |
| Closeworker | منطقية | سواء كان لإغلاق العامل | حقيقي | لا |
npm run test الإصدار-Rocket هو برنامج مفتوح المصدر مع Apache License 2.0
Web-Authn-Completed-App
معاينة عبر الإنترنت
تطبيق كامل يعتمد على واجهة برمجة تطبيقات WebAuthn ، والتي تتيح لمواقع الويب مصادقة المستخدمين مع المصادقة المدمجة في المتصفح/النظام (مثل Apple TouchID و Windows Hello أو مستشعر أجهزة المحمول البيومترية). سيحل محل كلمات المرور ، وهو مستقبل المصادقة عبر الإنترنت.
