检测网页更新并通知用户刷新：plugin-web-update-notification

前一段时间我们刚总结过解决如果检测项目部署了新需求及时通知用户更新的方案，今天无意间又发现一个现成的插件plugin-web-update-notification  ，太好了有人已经造好了轮子，而且有人帮你维护多好，直接拿来用就是了。

用之前我们先了解下原理，它是使用 Git 提交哈希（也支持 SVN 修订号、package.json 版本、构建时间戳、自定义）作为版本号，并将其写入 JSON 文件中。客户端定时轮询服务器端的版本（利用 visibilitychange 或焦点事件辅助），与本地版本对比，不一致时通知用户刷新页面（可定制行为）。

其实跟咱们总结的之前的方案2思路一样，这个插件更加完善了逻辑，而且增加了visibilitychange和焦点事件来出发更新检测不单单是靠轮询，这里的轮询反而成了兜底手段，另外还拓展了一些可配置项，比如刚才轮询你可以关掉轮询只用visibilitychange、focus 事件来触发检测等等吧。

下面我们来一起看看如何使用：

首先最关键：如果是单页面应用要禁用缓存，如果 index.html 存在缓存，可能刷新后，更新提示还会存在！！！

nginx ，禁用缓存

//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 标签禁用缓存

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

 下面就用vite为例：

// 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,
      notificationProps: {
        title: '系统更新',
        description: '发现系统更新，请点刷新页面',
        buttonText: '刷新',
        dismissButtonText: '忽略'
      },
    }),
  ]
})

//如果想在其他文件中监听更新事件
document.body.addEventListener('plugin_web_update_notice', (e) => {
  const { version, options } = e.detail
  alert('系统更新了!')
})

webUpdateNotice参数说明

function webUpdateNotice(options?: Options): Plugin

export interface Options {
/**
*支持“git_comit_hash”|“svn_revision_number”|“pkg_version”|“build_timestamp”|“custom”
* */
版本类
versionType?: VersionType
/**
* 自定义版本，如果versionType为“custom”，则此选项是必需的
*/
customVersion?: string
/**轮询间隔（ms）
*如果设置为0，则不会轮询
*默认10*60*1000
*/
checkInterval?: number
/**
* 检查窗口聚焦时的更新
* @default true
*/
checkOnWindowFocus?: boolean
/**
* 加载页面后立即检查更新
* @default true
*/
checkImmediately?: boolean
/**
* 加载js文件时检查更新错误
* @default true
*/
checkOnLoadFileError?: boolean
/**
*是否在控制台中输出版本
* 也可以传递一个函数来自定义处理版本样式
* logVersion: (version) => {
*  console.log(`version: %c${version}`, 'color: #1890ff')
* }
* @default true
*/
logVersion?: boolean | ((version: string) => void)
/**
*是否关闭通知。
*例如，当本地版本为v1.0时，您可以将此选项设置为true并构建新版本v1.0.1，则不会显示通知
*/
silence?: boolean
/** notificationProps 和 notificationConfig 二级配置 */
notificationProps?: NotificationProps
notificationConfig?: NotificationConfig
/**
* 国际化设置zh_CN | zh_TW | en_US  默认  zh_CN
* */
locale?: string
/**
* 自定义设置
*  https://github.com/GreatAuk/plugin-web-update-notification/blob/master/packages/core/src/locale.ts
*/
localeData?: LocaleData
/**
* 是否隐藏默认通知，默认false，如果设置true，则需要自己自定义弹窗样式
*/
hiddenDefaultNotification?: boolean
/**
* 是否隐藏取消按钮
* 默认 false
*/
hiddenDismissButton?: boolean
}

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

export interface NotificationConfig {
/**
* 刷新按钮颜色 默认 '#1677ff'
*/
primaryColor?: string
/**
* 取消按钮 默认 'rgba(0,0,0,.25)'
*/
secondaryColor?: string
/** 
按钮位置 默认 'bottomRight'
 */
placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'
}

export interface NotificationProps {
/**  标题 */
title?: string
/**  内容文本 */
description?: string
/**  确认按钮文本 */
buttonText?: string
/** 关闭按钮文本*/
dismissButtonText?: string
}

export type LocaleData = Record<string, NotificationProps>

以上就是插件的简单介绍和应用，希望对你有帮助。