Tools to check version monitoring (updates) for web application. web 应用版本监测(更新)工具库

Overview

🔔 version-rocket 🚀

English | 简体中文

Notify users when a new version of your site is available and prompt them to refresh the page. When you finish deploying your app, send a deployment message to Lark Group Chat

About

version-rocket checks the version in the user's current browser against the version file in the remote server.

If a new version is available, a new version update prompt will be displayed to and the user will be given an operation button to refresh the page. Alternatively, version-rocket can notify you by receiving a callback function to support custom user interface.

We use the Web Worker API based on javascript to do the polling loop, will not affect the browser rendering process.

Features

  • Support all modern browsers
  • Available version real-time monitoring
  • Support personalized version popup text and theme, also support custom UI
  • Sync deployment message to Lark group chat after successful deploy
  • Card text and templates for deployment messages support customization
  • Support TypeScript
  • Npm package support

Screenshots

  • The first picture prompts user to refresh the page.
  • The second picture personalize the popup text and theme, great for when you need to customize the text and theme.
  • The third picture shows that after the successful deployment of the project, the deployment message will be sent to the group chat to inform the team members.
  • The fourth picture @All with optional settings based on third picture

Usage

Install

version-rocket

Get Started

Install the latest version, use checkVersion function, this function compatible with pollingCompareVersion, and support customize popup text and theme (Recommended)

Use the default theme

// 1. Step one: import checkVersion(), and use
import { checkVersion } from 'version-rocket'
import { version } from '../package.json'

checkVersion({
  localPackageVersion: version,
  originVersionFileUrl: `${location.origin}/version.json`,
})
 
/**
 * 2. Step two:
 * generate-version-file shortcut command to create the version.json file.
 * 
 * The parameter is the directory where you want to create version.json.
 * 
 * If you don't pass the parameter, it will be created in the dist directory by default.
*/ 

{
  "name": "test",
  "description": "test",
  "private": true,
  "version": "0.0.1",
  "scripts": {
    ...
    "generate:version": "generate-version-file dist public"
    ...
  },
  ...
}

Complete the above two steps, the version monitoring function can be used normally 🎉 🎉

Personalize popup text and theme

import { checkVersion } from 'version-rocket'
import { version } from '../package.json'

checkVersion(
  {
    localPackageVersion: version,
    originVersionFileUrl: `${location.origin}/version.json`,
  },
  {
    title: 'Title',
    description: 'Description',
    primaryColor: '#758bfd',
    rocketColor: '#ff8600',
    buttonText: 'Button Text',
  }
)

Personalize popup image

import { checkVersion } from 'version-rocket'
import { version } from '../package.json'

checkVersion(
  {
    localPackageVersion: version,
    originVersionFileUrl: `${location.origin}/version.json`,
  },
  {
    imageUrl: 'https://avatars.githubusercontent.com/u/26329117',
  }
)

If you are using version 1.0.9 and later, call the pollingCompareVersion method

It is recommended to upgrade to the latest version and experience the function of customizing popup text and theme

// 1. Step one: import pollingCompareVersion, and use
import { pollingCompareVersion } from 'version-rocket'
import { version } from '../package.json'

pollingCompareVersion(version, `${location.origin}/version.json`, 30000, (data) => {
    console.log(data)
})

// 2. Step two: see above: "Use the default theme"

See "Attributes/Parameters" table for more personalized settings 📄


Support push notification of successful deployment to Lark group chat

/**
 * 1. Step one:
 * You need to create a send-lark-config.json file first, it store the field for setting the text for the message card. 
 * 
 * Then, you can just execute the send-lark-message shortcut command. By default, the send-lark-config.json file in the current path is selected.
 * 
 * MESSAGE_PATH (optional): If you want to customize the file path and file name, you can set the MESSAGE_PATH parameter to pass it in.
 * 
 * PACKAGE_JSON_PATH (optional): If you want to customize the path to the package.json file, you can do so by passing in the PACKAGE_JSON_PATH environment variable. We will get the package.json file from the root path by default.
*/

{
  "name": "test",
  "description": "test",
  "private": true,
  "version": "0.0.1",
  "scripts": {
    ...
    "send-lark-message:test": "MESSAGE_PATH=./lark-message-config.json PACKAGE_JSON_PATH=./packages/test/package.json send-lark-message"
    ...
  },
  ...
}
// Step two: send-lark-config.json example
{
    // card title
    "title": "TEST FE Deployed Successfully",
    // deploy project name
    "projectName": "TEST",
    // deploy branch name
    "branch": "Staging",
    // project url
    "accessUrl": "https://test.com",
    // 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
    "deployTools": "Jenkins",
    // the deploy time zone that you want to display, default "Asia/Shanghai"
    "expectConvertToTimezone": "America/New_York"
}

Personalize the deployment message template

// send-lark-config.json example
{
    // message card template content
    "message": {
        "msg_type": "text",
        "content": {
            "text": "New message reminder"
        }
    },
    // webhook link for the Lark bot
    "larkWebHook": "https://open.larksuite.com/open-apis/bot/v2/hook/xxxxxxxxxxxx"
}
 

Attributes/Parameters

checkVersion function parameter table

Params Type Description Default Required
config object Version monitoring configuration item Yes
config.originVersionFileUrl string The path to the version.json file on the remote server Yes
config.localPackageVersion string The version of the current application usually takes the version field of package.json for comparison with the version.json file of the remote server Yes
config.pollingTime number Time interval for polling monitoring, in ms 5000 No
config.onVersionUpdate function(data) Callback function for custom version hint UI (if you want to customize the popup UI, you can get the return value through the callback function to control the appearance of the popup) No
options object Configuration items for popup text and themes (not customize the popup UI, but use it if you need to modify the text and themes) No
options.title string Popup title Update No
options.description string Popup description V xxx is available No
options.buttonText string Popup button text Refresh No
options.imageUrl string Popup image No
options.rocketColor string The popup picture's theme color of the rocket, after setting Options.imageUrl is invalid No
options.primaryColor string The theme color of the popup, it will affect the hint image background color and button background color, after setting imageUrl is invalid No
options.buttonStyle string The CSS configuration of pop-up buttons can override the default button style No

pollingCompareVersion function parameter table

Params Type Description Default Required
localPackageVersion string The version of the current application usually takes the version field of package.json for comparison with the version.json file of the remote server Yes
originVersionFileUrl string The path to the version.json file on the remote server Yes
pollingTime number Time interval for polling monitoring, in ms Yes
onVersionUpdate function(data) Callback function for custom version hint UI (if you want to customize the popup UI, you can get the return value through the callback function to control the appearance of the popup) ) No

Link

You might also like...

A web watermark SDK, support: custom watermark content and style, watermark encryption and decryption, watermark anomaly monitoring, etc.

A web watermark SDK, support: custom watermark content and style, watermark encryption and decryption, watermark anomaly monitoring, etc.

English | 简体中文 1. What is l-watermark? l-watermark is a web watermark SDK based on TS, which contains: Can cover more than scene watermarking method A

Dec 10, 2022

Website that keeps monitoring status of WAX account and TLM balance from alienworlds

Website that keeps monitoring status of WAX account and TLM balance from alienworlds

✔️ Server is now live! [21-5-2021 10:30 GMT+7] 📃 Updates on Server ‼️ Bandwidth limit reaches on morning of 21 May 2021 (+7) I want to thank you to e

Nov 24, 2022

A fancy self-hosted monitoring tool

A fancy self-hosted monitoring tool

Uptime Kuma It is a self-hosted monitoring tool like "Uptime Robot". Features Monitoring uptime for HTTP(s) / TCP / Ping. Fancy, Reactive, Fast UI/UX.

Jan 3, 2023

An affordable and easy-to-use monitoring tool for your AWS serverless applications.

An affordable and easy-to-use monitoring tool for your AWS serverless applications.

AWS Serverless Applications Monitoring Tool Table of Contents Motivation for Project Getting Started AWS End Users Installation and Setup Lambda Metri

Sep 21, 2022

AWS Serverless Event-driven Microservices with using AWS Lambda, AWS DynamoDB, AWS API Gateway, AWS EventBridge, AWS SQS, AWS CDK stands for Cloud Development Kit for IaC — Infrastructure as Code tool and AWS CloudWatch for monitoring.

AWS Serverless Event-driven Microservices with using AWS Lambda, AWS DynamoDB, AWS API Gateway, AWS EventBridge, AWS SQS, AWS CDK stands for Cloud Development Kit for IaC — Infrastructure as Code tool and AWS CloudWatch for monitoring.

Serverless Event-driven E-commerce Microservices UDEMY COURSE WITH DISCOUNTED - Step by Step Development of this Repository - https://www.udemy.com/c

Jan 3, 2023

A dockerized uptime monitoring RESTful API server that allows authenticated users to monitor URLs

A dockerized uptime monitoring RESTful API server that allows authenticated users to monitor URLs, and get detailed uptime reports about their availability, average response time, and total uptime/downtime.

Oct 7, 2022

Easy-to-use CDK constructs for monitoring your AWS infrastructure

CDK Monitoring Constructs Easy-to-use CDK constructs for monitoring your AWS infrastructure. Easily add commonly-used alarms using predefined properti

Jan 6, 2023

A Kubernetes monitoring tool to visualize large-scale activity and real-time comprehensive metrics within your cluster.

A Kubernetes monitoring tool to visualize large-scale activity and real-time comprehensive metrics within your cluster.

Armada A light-weight Kubernetes health monitoring tool. Summary Armada is an open-source tool for monitoring the health of your Kubernetes cluster. I

Nov 2, 2022

Uptime monitoring RESTful API server that allows authenticated users to monitor URLs, and get detailed uptime reports about their availability, average response time, and total uptime/downtime.

Uptime Monitoring API Uptime monitoring RESTful API server that allows authenticated users to monitor URLs, and get detailed uptime reports about thei

Jun 14, 2022
Comments
  • 大佬,有两个问题想请教一下

    大佬,有两个问题想请教一下

    1. 我把checkVersion函数写在了mounted里,因为当前这个项目是一个子项目,类似于微前端这样子,嵌入到其他的工程中。第一次进入我这个项目会触发mounted,当离开我的这个项目,到另一个人的项目之后,checkVersion是持续在工作的,再次进入我的这个项目,会再次触发mounted,再次运行checkVersion,这样按道理来说会运行两个checkVersion,不过我在浏览器开发者模式中,只看到一个checkVersion在运行,这里是做了什么处理吗?
    opened by zzzlzp 4
  • How to pass the runtime value  to lark-message-config ?

    How to pass the runtime value to lark-message-config ?

    My project version is dynamic generate when the ci, can i send the different version to lark-message-config?

    Such as

    MESSAGE_PATH=./lark-message-config-failed.json VERSION=1.2.3-SNAPSHOT send-lark-message
    
    opened by pumbaamatata 4
Owner
hakuna
Frontend Engineer; Familiar with Vue.js; React.js and Node.js beginner; Interested in UI design⛽️
hakuna
Check in, check the weather, Check out.

☀️ Just-Weather ??️ Hi, Welcome! Just Weather is a Web App designed for Fast Real-Time Weather queries in combination with well Thought Out Visual Des

Miguel Ángel 6 Aug 7, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
The Remix version of the fakebooks app demonstrated on https://remix.run. Check out the CRA version: https://github.com/kentcdodds/fakebooks-cra

Remix Fakebooks App This is a (very) simple implementation of the fakebooks mock app demonstrated on remix.run. There is no database, but there is an

Kent C. Dodds 61 Dec 22, 2022
A mobile web application to check the data on the total covid19 confirmed cases and deaths, check data for all countries with recorded cases.

This is a mobile web application to check the data on the total covid19 confirmed cases and deaths, check data for all countries with recorded cases. It also has a details page to check for the statistics for each region/state if available.

Solomon Hagan 7 Jul 30, 2022
A Javascript based web application for monitoring, analytics and notifications

JELLYWATCH Jellywatch is a javascript web application for monitoring*, analytics** and notifications** inspired by tautulli for Jellyfin/Emby Media Se

null 27 Dec 28, 2022
Aron 8 Dec 17, 2022
API for the Baby Food Introduction Application. Keep your baby's food introductions in check with this application and backtrack in case of allergies!

Baby food introduction API This API is part of the Baby Food Introduction application, which aims to help technological parents keep track of the food

David Alecrim 6 Nov 25, 2022
🛠 Solana Web3 Tools - A set of tools to improve the user experience on Web3 Solana Frontends.

?? Solana Web3 Tools - A set of tools to improve the user experience on Web3 Solana Frontends.

Holaplex 30 May 21, 2022