Unplugin-monitor-update NPM

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 }>;
}

License

MIT

unplugin vite webpack rollup transform

unplugin

@everything-registry/sub-chunk-3016

0.1.2

5 months ago

0.1.1

5 months ago

unplugin-monitor-update

安装

关键：禁用 index.html 缓存！！！

Options

方法

License

关键：禁用 `index.html` 缓存！！！