Gathering detailed insights and metrics for unplugin-monitor-update
Gathering detailed insights and metrics for unplugin-monitor-update
Installations
npm install unplugin-monitor-updateDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
20.9.0
NPM Version
10.1.0
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
0.1.2
Package Id
unplugin-monitor-update@0.1.2
Unpacked Size
638.03 kB
Size
66.56 kB
File Count
56
NPM Version
10.1.0
Node Version
20.9.0
Published on
Dec 25, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
English | 简体中文
unplugin-update-notice
Monitor web page updates and notify users to reload the page
The git commit hash, package.json version, build timestamp, and custom version are used as the version number, and the version number is written to the json file at compile time. The client polls the server for the version number, or the browser window for visibilitychange, focus events, etc. If it is different, the user is notified to reload the page. If it is not the same, it notifies the user to reload the page.
When will updates be detected (fetch version.json)?
- first load page.
- poll (default: 10 * 60 * 1000 ms).
- script resource loading failure detected (404 ?).
- when the tab page is refocus or revisible.
Install
1# npm 2npm i unplugin-monitor-update -D 3 4# pnpm 5pnpm add unplugin-monitor-update -D 6 7# yarn 8yarn add unplugin-monitor-update -D
Vite
1// vite.config.ts 2import unpluginMonitorUpdate from 'unplugin-monitor-update/vite' 3 4export default defineConfig({ 5 plugins: [ 6 unpluginMonitorUpdate({ /* options */ }), 7 ], 8})
Example: playground/
Rollup
1// rollup.config.js 2import unpluginMonitorUpdate from 'unplugin-monitor-update/rollup' 3 4export default { 5 plugins: [ 6 unpluginMonitorUpdate({ /* options */ }), 7 ], 8}
Webpack
1// webpack.config.js 2module.exports = { 3 /* ... */ 4 plugins: [ 5 require('unplugin-monitor-update/webpack')({ /* options */ }) 6 ] 7}
Nuxt
1// nuxt.config.js 2export default defineNuxtConfig({ 3 modules: [ 4 ['unplugin-monitor-update/nuxt', { /* options */ }], 5 ], 6})
This module works for both Nuxt 2 and Nuxt Vite
Vue CLI
1// vue.config.js 2module.exports = { 3 configureWebpack: { 4 plugins: [ 5 require('unplugin-monitor-update/webpack')({ /* options */ }), 6 ], 7 }, 8}
esbuild
1// esbuild.config.js 2import { build } from 'esbuild' 3import unpluginMonitorUpdate from 'unplugin-monitor-update/esbuild' 4 5build({ 6 plugins: [unpluginMonitorUpdate()], 7})
Important: Disable index.html caching!
If index.html is cached, the update notification may still appear after refreshing, so it is necessary to disable the caching of index.html. This is also a best practice for deploy SPA applications.
To disable caching through nginx:
1# nginx.conf 2location / { 3 index index.html index.htm; 4 5 if ( $uri = '/index.html' ) { # disabled index.html cache 6 add_header Cache-Control "no-cache, no-store, must-revalidate"; 7 } 8 9 try_files $uri $uri/ /index.html; 10}
Directly disable caching through html meta tags:
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 5 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> 6 <meta http-equiv="Pragma" content="no-cache" /> 7 <meta http-equiv="Expires" content="0" /> 8 9</head> 10</html>
Listening for notification events
1// Listening for notification events 2document.body.addEventListener('unplugin_monitor_update_event', (e) => { 3 const { version, options } = e.detail 4 // write some code, show your custom notification and etc. 5 console.log('System needs to be updated!') 6})
Options
1export interface Options { 2 /** 3 * The type of generated version 4 * * commit_hash: git commit hash 5 * * package: package.json version 6 * * timestamp: timestamp 7 * * custom: custom version 8 * */ 9 versionType?: VersionType 10 /** 11 * custom version, if versionType is 'custom', this option is required 12 */ 13 customVersion?: string; 14 /** 15 * Monitoring modalities 16 * * polling: Polling monitoring 17 * * windowFocus: Monitor when window is focused 18 * * immediately: Monitoring immediately after page load 19 * * loadScriptError: Page script load failure(404) 20 * * windowVisibility: window visible 21 */ 22 monitorMode?: MonitorMode | MonitorMode[] 23 24 /** 25 * Monitoring intervals 26 * @default 10 * 60 * 1000 27 */ 28 checkInterval?: number 29 /** 30 * whether to output version in console 31 * 32 * you can also pass a function to handle the version 33 * ```ts 34 * logVersion: (version) => { 35 * console.log(`version: %c${version}`, 'color: #1890ff') // this is the default behavior 36 * } 37 * ``` 38 * @default true 39 */ 40 logVersion?: boolean | ((version: string) => void) 41 /** 42 * 43 * Base public path for inject file, Valid values include: 44 * * Absolute URL pathname, e.g. /foo/ 45 * * Full URL, e.g. https://foo.com/ 46 * * Empty string(default) or ./ 47 * 48 * !!! Don't forget / at the end of the path 49 */ 50 injectFileBase?: string 51 /** 52 * extra data in version.json 53 * 54 * @default {} 55 */ 56 extra?: Record<string, any> 57 58} 59 60export type VersionType = 'commit_hash' | 'package' | 'timestamp' | 'custom' 61 62export type MonitorMode = 'polling' | 'windowFocus' | 'immediate' | 'loadScriptError' | 'windowVisibility'
Methods
| name | params | describe |
|---|---|---|
| window.monitorSystemUpdate | manual check update, a function wrap by debounce(10 * 60 * 1000ms) |
1interface Window { 2 /** version number */ 3 __UNPLUGIN_MONITOR_UPDATE_VERSION__: string 4 /** 5 * don't call this function in manual。 6 */ 7 setupMonitorPlugin: (options: Options) => void 8 monitorSystemUpdate: () => void 9 10} 11 12interface GlobalEventHandlersEventMap { 13 unplugin_monitor_update_notice: CustomEvent<{ version: string; options: Options }>; 14}
License
No vulnerabilities found.
No security vulnerabilities found.