English | 简体中文
Contents
vite-plugin-web-update-notification
Detect web page updates and notify.
Take the git commit hash as the version number. The client polls the git commit hash of the server (visibilitychange event assistant), compares it with the local one, and if it is not the same, notifies the user to refresh the page.
Install
npm add vite-plugin-web-update-notification -D
# yarn add vite-plugin-web-update-notification -D
# pnpm add vite-plugin-web-update-notification -D
Usage
// vite.config.ts
import { defineConfig } from “vite”;
import vue from “@vitejs/plugin-vue”;
import { webUpdateNotice } from “vite-plugin-web-update-notification”;
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
webUpdateNotice({
logHash: 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({
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>
`,
}),
]
});
Options
function webUpdateNotice(options?: Options): Plugin;
interface Options {
/** polling interval（ms）, default 10*60*1000 */
checkInterval?: number;
/** wheather to output commit-hash in console */
logHash?: boolean;
customNotificationHTML?: string;
notificationProps?: NotificationProps;
}
interface NotificationProps {
title?: string;
description?: string;
buttonText?: string;
}