plugin-web-update-news-vite
v0.0.13
Published
Vite plugin for detect web page updates and notify.
Downloads
84
Maintainers
Readme
plugin-web-update-news-vite
Install
# vite
npm install plugin-web-update-news-vite
## Usage
[vite](#vite) | [umi](#umijs) | [webpack](#webpack)
### Vite
```ts
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { webUpdateNotice } from '@plugin-web-update-notification/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
webUpdateNotice({
logVersion: true,
}),
]
})
// vite.config.ts
export default defineConfig({
plugins: [
vue(),
webUpdateNotice({
// custom notification text
notificationProps: {
title: 'system update',
description: 'System update, please refresh the page',
buttonText: 'refresh',
},
}),
]
})
// vite.config.ts
export default defineConfig({
plugins: [
vue(),
webUpdateNotice({
// custom notification UI
customNotificationHTML: `
<div style="background-color: #fff;padding: 24px;border-radius: 4px;position: fixed;top: 24px;right: 24px;border: 1px solid;">
System update, please refresh the page
</div>
`,
}),
]
})
// hidden default notification, listener to update event custom behavior.
// vite.config.ts
export default defineConfig({
plugins: [
vue(),
webUpdateNotice({
hiddenDefaultNotification: true
}),
]
})
// other file to listener custom update event
document.body.addEventListener('system_update_plugin_web_update_notification', (options) => {
console.log(options)
alert('System update!')
})
Options
function webUpdateNotice(options?: Options): Plugin
interface Options {
/** polling interval(ms), default 10*60*1000 */
checkInterval?: number
/** whether to output commit-hash in console */
logVersion?: boolean
customNotificationHTML?: string
notificationProps?: NotificationProps
hiddenDefaultNotification?: boolean
/** index.html file path, by default, we will look up path.resolve(webpackOutputPath, './index.html') */
indexHtmlFilePath?: string // only webpack plugin support
}
interface NotificationProps {
title?: string
description?: string
buttonText?: string
}