? version-rocket ?，一個用於 web 應用檢測版本更新的小工具。
? version-rocket ?
一個用於 web 應用檢測版本更新的小工具。
經常會發生這樣的情況: 當使用者在瀏覽器中開啟某 web 應用較長時間且未重新整理頁面, 在應用有新版本更新或問題修復時, 使用者會無法及時知曉有新版釋出, 導致使用者繼續使用舊的版本, 影響使用者體驗和後端資料準確性。
在團隊合作中可能會有這樣的情況: 你作為前端工程師, 在聯調測試或部署上線時, 每次部署後都需要跟團隊成員口頭傳達已經部署成功, 增加了溝通成本, 不夠自動化, 也沒有部署記錄以有跡可循。
使用 version-rocket 可以幫你解決以上困擾。
簡介
version-rocket 將使用者當前瀏覽器中的版本與遠端伺服器中的版本檔案進行比較。
如果有新的版本釋出，將在頁面中展示一個新版本更新提示彈窗，使用者可以通過點選重新整理按鈕來更新版本。另外，version-rocket 也可傳入一個回撥函式來自定義版本更新提示介面。
我們使用基於javascript的 Web Worker API 來做監測輪詢，不會影響瀏覽器渲染程式。
另外, 如果你所在的團隊, 使用 Lark 或 飛書來團隊協作, version-rocket 可以幫你推送“部署成功”的訊息到 Lark 群聊中 (通過 Lark 機器人)。 使用方法非常快捷簡單, 使用方法見下文。
如果有其他平臺的推送需求, 可以提 issue
覺得有用，歡迎來點個 ?，https://github.com/guMcrey/version-rocket
功能特點
- 支援所有現代瀏覽器
- 可用版本實時監測
- 部署成功後，將部署訊息同步到 Lark 群聊
- 版本提示介面支援自定義，部署資訊卡片的內容也可以自定義
- 支援 Npm 安裝
效果截圖
- 第一張圖: 當有新版本更新時, 及時提醒使用者重新整理頁面的功能彈窗。
- 第二張圖: 在專案成功部署後，部署資訊將被髮送到群聊，以通知團隊成員, 卡片文案通過一個 json 檔案來配置, 請參見下文。
- 第三張圖: 基於第二張圖片的可選設定, 可以配置是否要@全員, 設定後所有人會收到提示。
使用方法
Npm 安裝 version-rocket 包
npm install version-rocket -S開始使用
// 1. 匯入 version-rocket 包的 pollingCompareVersion 方法, 並呼叫
import { pollingCompareVersion } from 'version-rocket'
import { version } from '../package.json'
/**
* @引數 1: 當前應用版本號, 通常取 package.json 的 version 欄位
* @引數 2: 遠端伺服器上的 version.json 檔案路徑
* @引數 3: 輪詢監測的時間間隔(毫秒)，預設為 5000 毫秒 (比較當前應用版本號和遠端伺服器中 version.json 中的版本號是否相同, 不同時展示版本更新彈窗。)
* @引數 4: 自定義版本提示 UI 的回撥函式 (如果你想自定義提示 UI, 通過回撥函式可以拿到返回值來控制提示的顯隱, 此引數可選)
*/
pollingCompareVersion(version, `${location.origin}/version.json`, 30000, (data) => {
console.log(data)
})
/**
* 2.
* 執行 generate-version-file 快捷命令，即可建立 version.json 檔案
* version.json 檔案預設生成在 dist 目錄下, 如果需要自定義目錄, 可傳入目錄引數, 參見以下示例:
*/
{
"name": "test",
"description": "test",
"private": true,
"version": "0.0.1",
"scripts": {
...
"generate:version": "generate-version-file dist public"
...
},
...
}
如果你想把成功部署的訊息推送到 Lark 機器人所在的群聊，請繼續 ?
/**
* 3.
* 你需要在專案根目錄下建立一個 send-lark-config.json 檔案，它儲存了用於設定訊息卡展示文案的欄位
* 然後, 執行 send-lark-message 快捷命令。預設情況下，當前路徑中的 send-lark-config.json 檔案被選中
* 如果你想自定義檔案路徑或檔名，你可以設定 MESSAGE_PATH 引數，將其傳入, 設定方法如下:
*/
{
"name": "test",
"description": "test",
"private": true,
"version": "0.0.1",
"scripts": {
...
"send-lark-message:test": "MESSAGE_PATH=./lark-message-config.json send-lark-message"
...
},
...
}
// send-lark-config.json 檔案及欄位
{
// 訊息卡片標題
"title": "TEST FE Deployed Successfully",
// 專案名稱
"projectName": "TEST",
// 專案分支, 可用於區別部署環境
"branch": "Staging",
// 專案可訪問地址
"accessUrl": "https://test.com",
// 是否@所有人: true / false
"isNotifyAll": true,
// Lark 機器人的 webhook 連結
"larkWebHook": "https://open.larksuite.com/open-apis/bot/v2/hook/xxxxxxxxxxxx",
// 部署所使用的方式或平臺
"deployTools": "Jenkins",
// 可選: 部署時間想要轉換的時區，預設 "Asia/Shanghai" (當你的專案要部署的目標伺服器與你所在時區不同, 可以此欄位轉換時區)
"expectConvertToTimezone": "America/New_York"
}