Vue实现项目重新部署后通知用户刷新网页

为什么需要此功能

        各位小伙伴是否在项目上线后被用户问到：不是说新功能今天上线吗，怎么没看见。

你：刷新下页面或者清除一下缓存

用户：怎么清除缓存

你：‍‍‍‍‍‍‍‍😫远程吧！

或者是一个bug你明明已经修改并上线了，但是用户依然说bug存在，等等，为了让用户能够及时使用到新功能，就得解决这个问题。

怎么解决

        那就需要每次更新后系统重新去服务器加载最新的文件，怎么让系统知道已经更新了呢，有许多办法，比如通过websocket通知用户系统已经更新了，并在用户确定后调用window.reload( true)重新去服务器请求最新的资源，但是websocket需要后端配合每次更新后往前端发通知，每次更新都要去麻烦后端人员。

        也可以写一个version.json文件，每次发布时更改里面的版本号，然后由系统轮询请求，判断这个版本号是否改变，但是每次发布之前都得手动去改变版本号，有时候可能都上线了才想起来版本号没改😅。

        想想有没有更加优雅的方式，纯前端就能实现呢。给小伙伴安利plugin-web-update-notification这个插件，它可以监听网页更新，并通知用户刷新页面，支持 Vite、 Webpack、 umi。

实现

github | npm | 文档

# vite
pnpm add @plugin-web-update-notification/vite -D
npm i @plugin-web-update-notification/vite -D

# umijs
pnpm add @plugin-web-update-notification/umijs -D
npm i @plugin-web-update-notification/umijs -D

# webpack plugin
pnpm add @plugin-web-update-notification/webpack -D
npm i @plugin-web-update-notification/webpack -D

 此处以vite为例，安装插件时注意vite的版本，安装失败的话会提示所需要的vite版本，请谨慎升级。

import { defineConfig } from'vite'
importvuefrom'@vitejs/plugin-vue'
import { webUpdateNotice } from'@plugin-web-update-notification/vite'
​
// https://vitejs.dev/config/
exportdefaultdefineConfig({
  plugins: [
    vue(),
    webUpdateNotice({
      versionType: 'build_timestamp',
	  notificationProps: {
        title: '📢 系统更新',
        description: '系统更新啦！, 请刷新页面',
        buttonText: '刷新',
        dismissButtonText: "忽略",
      },
    }),
  ]
})

优点

        接入简单，支持很多自定义配置等等，详细配置可参看配置档自行配置。

function webUpdateNotice(options?: Options): Plugin

export interface Options {
  /**
   * support 'git_commit_hash' | 'svn_revision_number' | 'pkg_version' | 'build_timestamp' | 'custom'
   * * if repository type is 'Git', default is 'git_commit_hash'
   * * if repository type is 'SVN', default is 'svn_revision_number'
   * * if repository type is 'unknown', default is 'build_timestamp'
   * */
  versionType?: VersionType
  /**
   * custom version, if versionType is 'custom', this option is required
   */
  customVersion?: string
  /** polling interval（ms）
   * if set to 0, it will not polling
   * @default 10 * 60 * 1000
   */
  checkInterval?: number
  /**
   * check update when window focus
   * @default true
   */
  checkOnWindowFocus?: boolean
  /**
   * check update immediately after page loaded
   * @default true
   */
  checkImmediately?: boolean
  /**
   * check update when load js file error
   * @default true
   */
  checkOnLoadFileError?: boolean
  /** whether to output version in console */
  logVersion?: boolean
  /**
   * whether to silence the notification.
   * such as when local version is v1.0, you can set this option to true and build a new version v1.0.1, then the notification will not show
   */
  silence?: boolean
  /**
   * @deprecated
   */
  customNotificationHTML?: string
  /** notificationProps have higher priority than locale */
  notificationProps?: NotificationProps
  notificationConfig?: NotificationConfig
  /**
   * preset: zh_CN | zh_TW | en_US
   * @default 'zh_CN'
   * */
  locale?: string
  /**
   * custom locale data
   * @link default data: https://github.com/GreatAuk/plugin-web-update-notification/blob/master/packages/core/src/locale.ts
   */
  localeData?: LocaleData
  /**
   * Whether to hide the default notification, if you set it to true, you need to custom behavior by yourself
   * ```ts
    document.body.addEventListener('plugin_web_update_notice', (e) => {
      const { version, options } = e.detail
      // write some code, show your custom notification and etc.
      alert('System update!')
    })
   * ```
   * @default false
   */
  hiddenDefaultNotification?: boolean
  /**
   * Whether to hide the dismiss button
   * @default false
   */
  hiddenDismissButton?: boolean
  /**
   * After version 1.2.0, you not need to set this option, it will be automatically detected from the base of vite config、publicPath of webpack config or publicPath of umi config
   *
   * 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
}

export type VersionType = 'git_commit_hash' | 'pkg_version' | 'build_timestamp' | 'custom'

export interface NotificationConfig {
  /**
   * refresh button color
   * @default '#1677ff'
  */
  primaryColor?: string
  /**
   * dismiss button color
   * @default 'rgba(0,0,0,.25)'
  */
  secondaryColor?: string
  /** @default 'bottomRight' */
  placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'
}

export interface NotificationProps {
  title?: string
  description?: string
  /** refresh button text */
  buttonText?: string
  /** dismiss button text */
  dismissButtonText?: string
}

export type LocaleData = Record<string, NotificationProps>

效果