plugin-web-update-news-vite/README.md

Vite plugin for detect web page updates and notify.

# plugin-web-update-news-vite

## Install

```bash
# 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,
    }),
  ]
})
```

```ts
// 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',
      },
    }),
  ]
})
```

```ts
// 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>
      `,
    }),
  ]
})
```

```ts
// 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

```ts
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
}
```

## License

[MIT](./LICENSE)