unplugin-monitor-update
v0.1.2
Published
[English](./README.md) | 简体中文
Downloads
1
Maintainers
kriszuReadme
English | 简体中文
unplugin-monitor-update
监控网页更新并通知用户重新加载页面
以 git commit hash、 package.json version、build timestamp、custom version 为版本号，编译时将版本号写入 json 文件。客户端轮询监测服务器上的版本号，或者是浏览器窗口的 visibilitychange、focus 事件等。如果不相同则通知用户重新加载页面。
什么时候会检测更新(fetch version.json) ?
- 首次加载页面。
- 轮询 （default: 10 * 60 * 1000 ms）。
- script 脚本资源加载失败 (404 ?)。
- 标签页 refocus or revisible。
安装
# npm
npm i unplugin-monitor-update -D
# pnpm
pnpm add unplugin-monitor-update -D
# yarn
yarn add unplugin-monitor-update -D// vite.config.ts
import unpluginMonitorUpdate from 'unplugin-monitor-update/vite'
export default defineConfig({
plugins: [
unpluginMonitorUpdate({ /* options */ }),
],
})Example: playground/
// rollup.config.js
import unpluginMonitorUpdate from 'unplugin-monitor-update/rollup'
export default {
plugins: [
unpluginMonitorUpdate({ /* options */ }),
],
}// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-monitor-update/webpack')({ /* options */ })
]
}// nuxt.config.js
export default defineNuxtConfig({
modules: [
['unplugin-monitor-update/nuxt', { /* options */ }],
],
})This module works for both Nuxt 2 and Nuxt Vite
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-monitor-update/webpack')({ /* options */ }),
],
},
}// esbuild.config.js
import { build } from 'esbuild'
import unpluginMonitorUpdate from 'unplugin-monitor-update/esbuild'
build({
plugins: [unpluginMonitorUpdate()],
})关键：禁用 index.html 缓存！！！
如果 index.html 存在缓存，可能刷新后，更新提示还会存在，所以需要禁用 index.html 的缓存。这也是 SPA 应用部署的一个最佳实践吧。
通过 nginx ，禁用缓存：
# nginx.conf
location / {
index index.html index.htm;
if ( $uri = '/index.html' ) { # disabled index.html cache
add_header Cache-Control "no-cache, no-store, must-revalidate";
}
try_files $uri $uri/ /index.html;
}直接通过 html meta 标签禁用缓存：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
</html>监听通知事件
// 监听更新事件
document.body.addEventListener('unplugin_monitor_update_event', (e) => {
const { version, options } = e.detail
// write some code, show your custom notification and etc.
console.log('System needs to be updated!')
})Options
export interface Options {
/**
* The type of generated version
* * commit_hash: git commit hash
* * package: package.json version
* * timestamp: timestamp
* * custom: custom version
* */
versionType?: VersionType
/**
* custom version, if versionType is 'custom', this option is required
*/
customVersion?: string;
/**
* Monitoring modalities
* * polling: Polling monitoring
* * windowFocus: Monitor when window is focused
* * immediately: Monitoring immediately after page load
* * loadScriptError: Page script load failure(404)
* * windowVisibility: window visible
*/
monitorMode?: MonitorMode | MonitorMode[]
/**
* Monitoring intervals
* @default 10 * 60 * 1000
*/
checkInterval?: number
/**
* whether to output version in console
*
* you can also pass a function to handle the version
* ```ts
* logVersion: (version) => {
* console.log(`version: %c${version}`, 'color: #1890ff') // this is the default behavior
* }
* ```
* @default true
*/
logVersion?: boolean | ((version: string) => void)
/**
*
* Base public path for inject file, Valid values include:
* * Absolute URL pathname, e.g. /foo/
* * Full URL, e.g. https://foo.com/
* * Empty string(default) or ./
*
* !!! Don't forget / at the end of the path
*/
injectFileBase?: string
/**
* extra data in version.json
*
* @default {}
*/
extra?: Record<string, any>
}
export type VersionType = 'commit_hash' | 'package' | 'timestamp' | 'custom'
export type MonitorMode = 'polling' | 'windowFocus' | 'immediate' | 'loadScriptError' | 'windowVisibility'方法
| name | params | describe | | ----------------------------------------------- | ----------------------------------- | ------------------------------------------------------------ | | window.monitorSystemUpdate | | manual check update, a function wrap by debounce(10 * 60 * 1000ms) |
interface Window {
/** version number */
__UNPLUGIN_MONITOR_UPDATE_VERSION__: string
/**
* don't call this function in manual。
*/
setupMonitorPlugin: (options: Options) => void
monitorSystemUpdate: () => void
}
interface GlobalEventHandlersEventMap {
unplugin_monitor_update_notice: CustomEvent<{ version: string; options: Options }>;
}